Czym jest hydration

Hydratacja to proces, w którym aplikacja Angular po stronie klienta ponownie wykorzystuje kod HTML wyrenderowany przez serwer, dołączając do istniejącego DOM obsługę zdarzeń i stan zamiast usuwać go i renderować ponownie.

Starsze rozwiązania SSR korzystały z destrukcyjnej hydratacji: klient usuwał DOM serwera i renderował wszystko od początku. Powodowało to widoczne migotanie i marnowało pracę wykonaną przez serwer.

Współczesny Angular wykonuje niedestrukcyjną hydratację: przechodzi po istniejącym DOM, dopasowuje go do drzewa komponentów i ponownie wykorzystuje węzły. Bez migotania, z mniejszą ilością pracy i lepszą wydajnością.

Ponowne wykorzystanie kodu HTML serwera oznacza, że największa treść pozostaje wyrenderowana, co pomaga poprawić LCP, a także zapobiega przesunięciom układu wynikającym z ponownego renderowania, co pomaga poprawić CLS. Aplikacja staje się interaktywna bez ponownego rysowania.

Etap pierwszy: serwer renderuje kod HTML i wysyła go. Etap drugi: przeglądarka pobiera kod JavaScript, uruchamia Angular i przeprowadza hydratację istniejących znaczników, aby stały się interaktywne.

Hydratacja zakłada, że drzewo komponentów klienta utworzy tę samą strukturę, którą utworzył serwer. Jeśli struktury się różnią, Angular zgłasza niezgodność hydratacji.

Bezpośrednia modyfikacja DOM, gałęzie zależne od przeglądarki zmieniające znaczniki, nieprawidłowe zagnieżdżenie HTML oraz niedeterministyczna treść (na przykład Math.random() lub Date.now() w szablonach) powodują niezgodności.

Nie należy imperatywnie modyfikować DOM podczas SSR, na przykład za pomocą innerHTML poza Angular. Należy pozwolić Angularowi zarządzać DOM, aby klient i serwer zachowywali zgodność.

Jeśli komponent rzeczywiście nie może zostać poddany hydratacji, na przykład zewnętrzny widżet modyfikujący DOM, wyłącz go z hydratacji za pomocą ngSkipHydration; Angular ponownie wyrenderuje tylko to poddrzewo.

Hydratacja ma zastosowanie tylko wtedy, gdy istnieje kod HTML wyrenderowany po stronie serwera, który można ponownie wykorzystać. Aplikacja działająca wyłącznie w modelu CSR nie ma czego hydratować — hydratacja to kliencka część SSR.

Hydratacja może być pełna (cała aplikacja jest hydratowana podczas ładowania) albo inkrementalna (poszczególne części są hydratowane na żądanie). Wybór właściwej strategii ma kluczowe znaczenie dla wydajności i zostanie omówiony w kolejnych lekcjach.

Sprawdź swoją wiedzę na temat hydratacji.

Hydratacja w sposób nieinwazyjny ponownie wykorzystuje kod HTML serwera po stronie klienta, poprawiając LCP i CLS. Niezgodności wynikają z ręcznych zmian w DOM-ie lub niedeterministycznego oznaczenia; jako rozwiązanie awaryjne użyj ngSkipHydration. Hydratacja to kliencka część SSR.