Hydratacja

Ożywianie statycznego HTML JavaScriptem.

Ścieżka renderowania — diagram wyjaśniający — Ścieżka renderowania: z HTML i CSS powstaje obraz strony na ekranie. Otwórz diagram z opisem i legendą.

Co to jest Hydratacja?

Hydratacja to moment, w którym JavaScript „ożywia” gotowy HTML wysłany przez serwer (SSR/SSG): podpina obsługę zdarzeń, stan i interaktywność do statycznej struktury, która już jest na ekranie.

Użytkownik najpierw widzi treść (bo HTML przyszedł gotowy), a po chwili strona staje się klikalna. Jeśli skryptów jest dużo, ten moment się odwleka i strona przez chwilę „nie reaguje”.

Dlaczego to ważne dla SEO

Zbyt ciężka hydratacja opóźnia reakcję na pierwsze kliknięcia i psuje INP. Optymalizacja (mniej JS, hydratacja częściowa) bezpośrednio poprawia responsywność.

Jak to sprawdzić

Obserwuj opóźnienie między pojawieniem się treści a możliwością kliknięcia. Wysoki INP w pomiarach często wskazuje na ciężką hydratację.

Częste błędy

Hydratacja całej strony naraz przy dużej ilości JS
Niezgodność HTML serwera i klienta (błędy hydratacji)
Blokowanie interakcji do końca wykonania skryptów

Przykład

HTML z serwera (widoczny) → JS się podpina → strona reaguje

Poradniki na ten temat

SSR, SSG czy CSR — którą strategię renderowania wybrać — Wybór między renderowaniem na serwerze, budowaniem statycznym a renderowaniem w przeglądarce sprowadza się do jednego pytania: jak szybko treść musi być świeża i jak pewnie ma być indeksowana.

Wszystkie hasła · Cała Wiedza · Jak skanujemy