Baza wiedzy

Hydration

Proces przejmowania statycznego HTML wyrenderowanego przez serwer przez kod JavaScript w przeglądarce, tak aby interfejs stał się interaktywny.

← Wróć do bazy wiedzy

Jak działa hydration



W architekturze SSR użytkownik najpierw otrzymuje gotowy HTML z serwera. Następnie JavaScript ładowany w przeglądarce „podłącza się” do istniejącego DOM i przypisuje do niego logikę interaktywną: event listenery, stan aplikacji i obsługę zdarzeń.



Po co stosuje się hydration



  • połączyć zalety SSR z interaktywnością aplikacji frontendowej,

  • przyspieszyć wyświetlenie pierwszej treści,

  • utrzymać dobrą indeksowalność strony przez wyszukiwarki.



Problemy hydration



  • duży bundle JavaScript może opóźnić moment pełnej interaktywności,

  • niespójność między HTML z serwera a stanem klienta może powodować błędy,

  • zbyt ciężka warstwa kliencka może pogorszyć INP.



Alternatywy



Niektóre podejścia ograniczają pełną hydration, stosując partial hydration lub island architecture, w której tylko wybrane komponenty są interaktywne, a reszta pozostaje statycznym HTML.

Powiązane pojęcia
Kontakt
Masz pytanie techniczne?

Porozmawiajmy

Chętnie wyjaśnię, jak te pojęcia przekładają się na Twój projekt.

Skontaktuj się