Inkrementel hydration med @defer
Hydrér dele af siden efter behov.
Inkrementel hydration med @defer er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Omkostningen ved fuld hydrering
Fuld hydrering starter alle komponenter på forhånd. Inkrementel hydrering hydreres i stedet dele af siden efter behov og udskyder JavaScript for sektioner, indtil der er brug for dem.
Bygget på defer
Inkrementel hydrering bruger blokken @defer sammen med de særlige hydrate-udløsere. Serveren renderer stadig indholdet, men klienten hydreres først, når en udløser aktiveres.
@defer (hydrate on viewport) {
<app-comments />
}Aktivering
Tilvælg funktionen med withIncrementalHydration() i hydreringsudbyderen. Det aktiverer hydrate-udløserne i skabeloner.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
Den mest almindelige udløser hydreres en blok, når den ruller ind i visningen. Indhold under folden forbliver inaktivt, så JavaScript-arbejdet spares, indtil brugeren når det.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
Hydrér, når brugeren interagerer (klik, keydown) med blokken. Det er perfekt til widgets, der er synlige, men sjældent bruges, som f.eks. et panel, der kan foldes ud.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle og timer
Brug hydrate on idle til at hydrere, når browseren er ledig, eller hydrate on timer(2s) til at hydrere efter en forsinkelse. Det er velegnet til ikke-kritiske områder.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never holder den serverrenderede HTML statisk: den vises, men der sendes aldrig JS til blokken. Ideelt til rent præsentationsindhold uden interaktion.
@defer (hydrate never) {
<app-footer-links />
}Forskel fra almindelig defer
En almindelig @defer i en CSR-kontekst viser en pladsholder, indtil indholdet er indlæst. Ved inkrementel hydrering er indholdet allerede serverrenderet og synligt; udløseren styrer kun, hvornår interaktiviteten (hydreringen) starter.
Kombination af udløsere
Du kan kombinere udløsere, så en blok hydreres ved den hændelse, der sker først, og dermed afveje hurtig tilgængelighed mod ressourcebesparelser.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Mindre indledende JS
Ved at udskyde hydreringen af tunge komponenter eller komponenter under folden bliver den indledende JavaScript-mængde, der kræves til interaktivitet, mindre. Det forbedrer tiden til interaktivitet og INP på den kritiske sti.
Vælg udløsere med omtanke
Hydrér interaktive elementer over folden ivrigt eller ved inaktivitet; udskyd elementer under folden og widgets, der sjældent bruges, til visning eller interaktion. Mål resultaterne for at bekræfte forbedringerne.
Hurtigt tjek
Tjek din viden om inkrementel hydrering.
Opsummering
Du brugte @defer (hydrate ...) sammen med withIncrementalHydration() til at hydrere ved visning, interaktion, inaktivitet, timer eller aldrig. Det mindsker den indledende JS-mængde og forbedrer interaktiviteten ved at udskyde hydreringen af blokke under folden og blokke, der sjældent bruges.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “Inkrementel hydration med @defer” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “Inkrementel hydration med @defer”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Inkrementel hydration med @defer”?
Hydrér dele af siden efter behov. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Inkrementel hydration med @defer”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hvad er hydration
- Aktivering af fuld hydration
- Inkrementel hydration med @defer
- Måling af Core Web Vitals