Włączanie pełnego hydration
Włączać hydration, aby uniknąć ponownego renderowania
Włączanie pełnego hydration to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.
Włączanie hydratacji
Pełną hydratację włącza się przez dodanie provideClientHydration() do dostawców aplikacji. Schemat ng add @angular/ssr doda ją za Państwa.
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};Gdzie ją umieścić
Należy ją umieścić w dostawcach przeglądarkowej konfiguracji appConfig, czyli w tej samej konfiguracji, która służy do uruchomienia klienta. Konfiguracja serwera jest nakładana na tę konfigurację za pomocą provideServerRendering().
Co oznacza pełna hydratacja
Pełna (eager) hydratacja obejmuje całe drzewo komponentów, gdy tylko JavaScript zostanie załadowany, a Angular uruchomiony. Każdy komponent staje się interaktywny jednocześnie.
Odtwarzanie zdarzeń
Włącz withEventReplay(), aby interakcje użytkownika wykonane przed zakończeniem hydratacji zostały przechwycone i odtworzone później. Zapobiega to utracie kliknięć na wolniejszych urządzeniach.
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
providers: [provideClientHydration(withEventReplay())]Pamięć podręczna transferu HTTP
Gdy hydratacja jest włączona, odpowiedzi GET z serwera uzyskane przez HttpClient są domyślnie zapisywane w TransferState, dzięki czemu klient nie pobiera ponownie tych samych danych po uruchomieniu.
provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))Weryfikowanie hydratacji
W trybie deweloperskim otwórz konsolę. Angular rejestruje statystyki hydratacji (liczbę zahydratowanych komponentów i ponownie użytych węzłów). Brak ostrzeżeń o niezgodnościach oznacza, że hydratacja przebiegła pomyślnie.
// Angular hydrated 24 component(s) and 187 node(s)Naprawianie niezgodności
Jeśli zobaczysz błędy niezgodności NG0500, poszukaj niedeterministycznych szablonów lub ręcznych zmian w DOM-ie. Zadbaj o deterministyczne oznaczenie, aby wyniki serwera i klienta były zgodne.
Zabezpieczanie API przeglądarki
Kod, który podczas początkowego renderowania korzysta z window lub localStorage, może zmienić oznaczenie między serwerem a klientem. Zabezpiecz go za pomocą isPlatformBrowser albo uruchamiaj po zainicjowaniu widoku.
if (isPlatformBrowser(this.platformId)) {
this.width = window.innerWidth;
}Koszt pełnej hydratacji
Pełna hydratacja jest prosta, ale z góry pobiera i wykonuje kod JavaScript wszystkich komponentów. W dużych aplikacjach może to opóźniać interaktywność; problem ten rozwiązuje hydratacja inkrementalna.
i18n a hydratacja
Hydratacja działa z Angular i18n, ale należy zadbać o deterministyczność przetłumaczonej treści. Niezgodne lokalizacje po stronie serwera i klienta powodują błędy hydratacji.
Kontrola przed wdrożeniem
Przed wdrożeniem zbuduj aplikację w trybie produkcyjnym, uruchom wynik SSR i sprawdź w karcie sieci oraz w konsoli, czy hydratacja działa bez niezgodności, a pamięć transferu zapobiega podwójnemu pobieraniu danych.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat pełnej hydratacji.
Podsumowanie
Włączyli Państwo pełną hydratację za pomocą provideClientHydration(), dodali withEventReplay() dla kliknięć przed hydratacją, wykorzystali pamięć podręczną transferu HTTP, zabezpieczyli API przeglądarki i zweryfikowali poprawny przebieg hydratacji. Pełna hydratacja jest prosta, ale z góry ładuje cały kod JS.
Często zadawane pytania
Czy lekcja „Włączanie pełnego hydration” jest bezpłatna?
Tak — pełny tekst „Włączanie pełnego hydration” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Włączanie pełnego hydration”?
Włączać hydration, aby uniknąć ponownego renderowania Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Angular Academy?
Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Włączanie pełnego hydration”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?
Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Czym jest hydration
- Włączanie pełnego hydration
- Przyrostowy hydration za pomocą @defer
- Pomiar kluczowych wskaźników internetowych