Hydration (hydratace)

Příklady z praxe

1. 01

   React: hydrateRoot místo createRoot

   Aplikace vykreslená na serveru se v prohlížeči nesmí nabootovat přes createRoot, protože ten by existující HTML zahodil a vykreslil znovu. Správný vstupní bod je hydrateRoot, který se naváže na už doručené uzly. Pokud se stromy neshodnou, React ohlásí chybu a problematický podstrom přerenderuje.

   import { hydrateRoot } from 'react-dom/client';
   import App from './App';
   
   // #root už obsahuje HTML ze serveru
   hydrateRoot(document.getElementById('root'), <App />);

2. 02

   Mismatch kvůli času vykreslení

   Komponenta zobrazující aktuální čas vygeneruje na serveru jinou hodnotu než o vteřinu později v prohlížeči, takže vznikne hydration mismatch. Řešením je vykreslit na serveru neutrální obsah a skutečný čas doplnit až v efektu po hydration, případně formátovat na klientovi s pevným časovým pásmem.

   function Clock() {
     const [time, setTime] = useState(null);
     useEffect(() => setTime(new Date()), []);
     return <span>{time ? time.toLocaleTimeString() : '--:--:--'}</span>;
   }

Časté omyly

MýtusKdyž je stránka vykreslená na serveru, je hned interaktivní.

Ve skutečnostiServerové HTML dá jen vzhled a obsah. Tlačítka, formuláře a routing začnou fungovat až po stažení a spuštění klientského balíčku a dokončení hydration, což u velkých aplikací trvá stovky milisekund i sekundy.

MýtusHydration mismatch je jen varování v konzoli, které se dá ignorovat.

Ve skutečnostiMismatch znamená, že framework nemůže existující DOM použít a podstrom vykreslí znovu. Ztrácí se tím výhoda SSR, může zmizet stav vloženého obsahu a uživatel vidí probliknutí.

MýtusHydration se dá zrychlit tím, že se HTML pošle menší.

Ve skutečnostiDobu hydration určuje především velikost a náročnost JavaScriptu, ne velikost HTML. Zkrácení se dosahuje menším balíčkem, partial hydration nebo úplným odstraněním JS u statických částí stránky.

Časté dotazy

Jak poznám, že hydration zpomaluje moji stránku?

Zpomalení kvůli hydration se pozná z rozdílu mezi metrikami zobrazení a interaktivity. Když First Contentful Paint vychází dobře, ale Interaction to Next Paint nebo Total Blocking Time jsou vysoké, stránka se ukáže rychle a jen dlouho nereaguje. V profileru prohlížeče se to projeví jako souvislý blok práce v hlavním vlákně krátce po načtení skriptu. Pomůže zmenšit balíček, odložit nekritické komponenty přes dynamický import a nechat statické části stránky bez JavaScriptu.

Jak opravit hydration mismatch v Reactu nebo Next.js?

Hydration mismatch se opravuje odstraněním všeho, co se mezi serverem a klientem liší. Nejčastěji jde o aktuální čas, náhodná čísla, přístup k window, localStorage nebo cookies během renderu, jinou lokalizaci a rozšíření prohlížeče, která mění DOM. Řešení je vykreslit na serveru deterministický obsah a klientskou hodnotu doplnit až v useEffect, případně komponentu načíst dynamicky bez SSR. Zkontrolujte také validitu HTML: zanořený odstavec nebo blokový prvek uvnitř inline prvku parser opraví a stromy pak nesedí.

Potřebuje každá stránka hydration?

Hydration potřebují jen stránky s klientskou interaktivitou. Blogový článek, dokumentace nebo landing page bez formulářů a stavu se obejde čistým HTML a CSS, případně několika řádky vanilla JavaScriptu. Frameworky jako Astro nebo Eleventy z toho dělají výchozí režim a interaktivní části řeší jako izolované ostrůvky. Nasazení plného SPA frameworku na statický obsah znamená posílat balíček, který uživateli nic nepřidá, a přesto blokuje hlavní vlákno.

Co znamená resumability oproti hydration?

Resumability je alternativa k hydration, která se snaží úplně vynechat opakování prvního renderu na klientovi. Stav aplikace i informace o tom, který posluchač patří ke kterému prvku, se serializují přímo do HTML. Prohlížeč pak po kliknutí načte jen ten kousek kódu, který danou událost obsluhuje. Tenhle přístup prosazuje framework Qwik. Cenou je složitější serializace, větší HTML a menší ekosystém než u zavedených řešení s hydration.

Zdroje

1. hydrateRoot(otevře se v novém okně)React
2. Rendering(otevře se v novém okně)Vercel
3. HTML Standard(otevře se v novém okně)WHATWG
4. Document Object Model (DOM)(otevře se v novém okně)MDN Web Docs

Související pojmy

• Core Web VitalsCore Web Vitals je sada uživatelsky orientovaných metrik, kterými Google hodnotí rychlost načtení, odezvu na interakce a vizuální stabilitu webové stránky. V praxi jde hlavně o LCP, INP a CLS, tedy signály, které pomáhají odhalit pomalý obsah, zaseknuté rozhraní nebo poskakující layout.
• Code splittingCode splitting je technika, při které se JavaScriptový balík aplikace rozdělí na menší soubory (chunky), jež prohlížeč stahuje až ve chvíli, kdy jsou skutečně potřeba. Místo jednoho velkého bundlu se při prvním načtení přenese jen kód nutný pro zobrazenou stránku, zbytek dorazí později na vyžádání.
• Server-side renderingServer-side rendering je způsob vykreslení webové stránky, při kterém server sestaví hotové HTML ještě před odesláním do prohlížeče. Uživatel tak může vidět obsah dříve, než se stáhne a spustí celý JavaScript. Přístup pomáhá SEO a prvnímu zobrazení, ale přesouvá část práce na server.
• RenderRender je proces převodu dat, kódu nebo scény do výsledné vizuální podoby, například webové stránky, komponenty aplikace, snímku videa nebo 3D obrazu. Ve vývoji označuje jak práci prohlížeče a UI frameworku, tak výpočet grafiky na CPU nebo GPU.
• Single Page ApplicationSingle Page Application je webová aplikace, která po prvním načtení obvykle nemění celý HTML dokument, ale aktualizuje rozhraní pomocí JavaScriptu a dat z API. Uživatel tak vnímá plynulejší navigaci, zatímco vývojář řeší klientský routing, stav aplikace, výkon prvního načtení a dopady na SEO.
• 3D model3D model je digitální reprezentace objektu nebo prostoru ve třech rozměrech, složená z geometrie, materiálů a často i textur, animací či fyzikálních vlastností. Používá se v hrách, filmech, průmyslovém návrhu, architektuře, e-commerce i simulacích, kde software z modelu počítá zobrazení nebo další data.
• ACIDACID je sada čtyř vlastností databázové transakce: atomicity, consistency, isolation a durability. Zaručuje, že skupina zápisů proběhne jako jeden celek, neporuší definovaná pravidla databáze, nebude se nebezpečně míchat s jinými transakcemi a po potvrzení přežije pád systému, například při převodu peněz.
• Adaptive IconAdaptivní ikona je formát ikony aplikace na Androidu, který se místo jedné hotové bitmapy skládá z oddělených vrstev: pozadí a popředí. Systém výsledný tvar sám ořízne podle masky výrobce zařízení a může vrstvy animovat nebo přebarvit. Vývojář tak dodá jeden zdroj a launcher z něj vytvoří kruh, čtverec i squircle.