Hydratacja
Ożywianie statycznego HTML JavaScriptem.
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