Przyrostowy hydration za pomocą @defer
Hydratować fragmenty strony na żądanie
Przyrostowy hydration za pomocą @defer to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 3 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.
Koszt pełnej hydratacji
Pełna hydratacja uruchamia z góry każdy komponent. Hydratacja inkrementalna hydratruje natomiast poszczególne części strony na żądanie, odraczając JavaScript dla danych sekcji do momentu, gdy będzie potrzebny.
Oparte na defer
Hydratacja inkrementalna korzysta z bloku @defer i specjalnych wyzwalaczy hydrate. Serwer nadal renderuje treść, ale klient hydratruje ją dopiero po uruchomieniu wyzwalacza.
@defer (hydrate on viewport) {
<app-comments />
}Włączanie
Włącz tę funkcję, dodając withIncrementalHydration() do dostawcy hydratacji. Umożliwi to korzystanie z wyzwalaczy hydrate w szablonach.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
Ten najczęściej używany wyzwalacz hydratruje blok, gdy pojawi się on w obszarze widocznym. Treść poniżej pierwszego ekranu pozostaje nieaktywna, co ogranicza pracę JavaScriptu do momentu, gdy użytkownik do niej dotrze.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
Hydratruj blok, gdy użytkownik wejdzie z nim w interakcję (click, keydown). To doskonałe rozwiązanie dla widocznych, ale rzadko używanych elementów, takich jak rozwijany panel.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle i timer
Użyj hydrate on idle, aby hydratować blok, gdy przeglądarka jest bezczynna, albo hydrate on timer(2s), aby zrobić to po określonym czasie. To dobre rozwiązanie dla obszarów niekrytycznych.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never pozostawia wyrenderowany przez serwer kod HTML statyczny: jest on wyświetlany, ale JavaScript dla tego bloku nigdy nie jest dostarczany. To idealne rozwiązanie dla treści wyłącznie prezentacyjnych i nieinteraktywnych.
@defer (hydrate never) {
<app-footer-links />
}Różnica w porównaniu ze zwykłym defer
Standardowy @defer w kontekście CSR wyświetla element zastępczy do czasu załadowania treści. W przypadku hydratacji inkrementalnej treść jest już wyrenderowana przez serwer i widoczna; wyzwalacz określa tylko moment rozpoczęcia interaktywności (hydratacji).
Łączenie wyzwalaczy
Można łączyć wyzwalacze, aby blok został zahydratowany po zajściu pierwszego z kilku zdarzeń, równoważąc szybkość gotowości i oszczędność zasobów.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Mniejszy początkowy kod JS
Odroczenie hydratacji ciężkich komponentów lub komponentów znajdujących się poniżej pierwszego ekranu zmniejsza ilość początkowego JavaScriptu potrzebnego do zapewnienia interaktywności, poprawiając time-to-interactive i INP na krytycznej ścieżce.
Rozważny wybór wyzwalaczy
Interaktywne elementy widoczne na pierwszym ekranie hydratruj od razu lub podczas bezczynności; hydratację elementów poniżej pierwszego ekranu i rzadko używanych widżetów odrocz do momentu pojawienia się w obszarze widocznym lub interakcji. Wykonuj pomiary, aby potwierdzić korzyści.
Szybkie sprawdzenie
Sprawdź swoją wiedzę na temat hydratacji inkrementalnej.
Podsumowanie
Użyli Państwo @defer (hydrate ...) wraz z withIncrementalHydration(), aby hydratować bloki po pojawieniu się w obszarze widocznym, interakcji, przejściu przeglądarki w stan bezczynności, upływie czasu lub nigdy. Zmniejsza to ilość początkowego kodu JS i poprawia interaktywność, odraczając hydratację bloków znajdujących się poniżej pierwszego ekranu oraz rzadko używanych.
Często zadawane pytania
Czy lekcja „Przyrostowy hydration za pomocą @defer” jest bezpłatna?
Tak — pełny tekst „Przyrostowy hydration za pomocą @defer” 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 „Przyrostowy hydration za pomocą @defer”?
Hydratować fragmenty strony na żądanie Ć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 3 z 4.
Ile czasu zajmuje lekcja „Przyrostowy hydration za pomocą @defer”?
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