Hydratacja to proces, w którym framework JavaScript podpina obsługę zdarzeń i stan do HTML wyrenderowanego wcześniej na serwerze, dzięki czemu statyczna strona staje się interaktywna.
Skąd biorą się błędy hydratacji?
Gdy HTML z serwera różni się od tego, co wyrenderuje przeglądarka (np. przez losowe wartości, daty czy odwołania do window), framework zgłasza błąd niezgodności i może odtworzyć drzewo od nowa.
Jak ich unikać?
- nie używaj danych dostępnych tylko w przeglądarce podczas renderowania na serwerze,
- generuj czas i identyfikatory w sposób deterministyczny,
- ładuj komponenty zależne od przeglądarki dopiero po zamontowaniu.
Częsty powód to różnica między HTML z serwera a tym z przeglądarki, np. użycie bieżącej godziny lub losowej wartości przy renderowaniu.
Czy hydratacja wpływa na INP?
Tak. Do czasu zakończenia hydratacji strona wygląda na gotową, ale może nie reagować na kliknięcia, co pogarsza wrażenia i wskaźnik INP.
Zobacz w praktyce
CSR, SSR, SSG czy ISR? Porównanie metod renderowania 
Płynne działanie strony w JavaScript - jak działa Event Loop i jak uniknąć zacinania ekranu? 
Refaktoryzacja JavaScript – jak poprawić Interaction to Next Paint (INP)