Hydratace
Také známo jako Hydration, Hydratace, Rehydration
Stručně
JavaScript na klientovi převezme HTML ze serveru a navěsí události — obě strany přitom musí vykreslit stejný strom.
SSR dá návštěvníkovi HTML; hydratace je krok, který ho oživí. React projde existující DOM, porovná ho s tím, co by komponenty vykreslily, a navěsí posluchače. Když se výstup neshoduje, React vypíše chybu hydratace a přerenderuje části, které nedokázal spárovat.
„Text content does not match server-rendered HTML“
Narazí na to každý v prvním týdnu SSR. Server vykreslil 10:42:07, prohlížeč 10:42:08. Nebo server běžel v UTC a klient v Europe/Prague, takže datum vyjde o den jinde. Nebo kód při renderu čte `localStorage`, `window.innerWidth` nebo `Math.random()` — hodnoty, které server nemá.
Pravidlo: nic, co není na obou stranách stejné, nesmí být ve výstupu renderu. Datum projde explicitní časovou zónou a pevnou lokalizací, náhodné hodnoty vzniknou v efektu až po namountování a data jen z prohlížeče se čtou v `useEffect` a ukládají do stavu, který na serveru začíná prázdný nebo jako `null`.
Kolik hydratace stojí
HTML je rychle, ale do načtení, parsování a spuštění JavaScriptu nic nefunguje — u průměrného telefonu a 200 kB JS to dělá dvě až tři sekundy po zobrazení obsahu. Uživatelé ten rozdíl přesně zaznamenají: kliknou na „Do košíku“ a nic se neděje. Tlačítko, které nereaguje, vypadá jako rozbitý obchod, lidé klikají dvakrát nebo odcházejí.
Obvyklá odpověď je hydratovat méně. Odstraňte klientské komponenty z layoutů, které interaktivitu nepotřebují, těžké widgety (mapy, grafy, carousely) schovejte za `dynamic()` se statickým placeholderem a kritickou cestu — hlavičku, navigaci, tlačítko košíku — nechte na co nejmenším kódu.
Zdroje
Související pojmy
SSR (renderování na serveru)
HTML se staví na serveru při každém požadavku, takže návštěvník vidí obsah dřív, než se načte JavaScript.
Komponenta
Znovupoužitelná část rozhraní, která má jednu úlohu — kartu produktu, cenovku, filtr — a svůj malý stav.
Správa stavu
Rozhodnutí, co si aplikace pamatuje, kde to žije a kdo to smí měnit — nejdřív lokálně, globálně jen když to sdílíte.