Hydration incrementale con @defer
Eseguire l'hydration delle parti della pagina su richiesta
Hydration incrementale con @defer è una lezione Angular Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Angular Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Angular Academy include 4 lezioni in totale.
Il costo della hydration completa
La hydration completa avvia subito ogni componente. La hydration incrementale, invece, sottopone a hydration le parti della pagina su richiesta, rimandando il caricamento del JavaScript delle sezioni finché non è necessario.
Basata su defer
La hydration incrementale usa il blocco @defer con i trigger speciali hydrate. Il server continua a eseguire il rendering del contenuto, ma il client lo sottopone a hydration solo quando si attiva un trigger.
@defer (hydrate on viewport) {
<app-comments />
}Abilitarla
La abiliti aggiungendo withIncrementalHydration() al provider della hydration. In questo modo vengono sbloccati i trigger hydrate nei template.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate on viewport
Il trigger più comune sottopone a hydration un blocco quando entra nell'area visibile. Il contenuto sotto la piega rimane inattivo, risparmiando lavoro JavaScript finché l'utente non lo raggiunge.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate on interaction
La hydration viene eseguita quando l'utente interagisce (click, keydown) con il blocco. È ideale per i widget visibili ma usati raramente, come un pannello espandibile.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate on idle e timer
Usi hydrate on idle per eseguire la hydration quando il browser è libero, oppure hydrate on timer(2s) per eseguirla dopo un intervallo. È una buona scelta per le aree non critiche.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate never
hydrate never mantiene statico l'HTML renderizzato dal server: lo visualizza, ma non invia mai JavaScript per quel blocco. È ideale per contenuti esclusivamente presentazionali e non interattivi.
@defer (hydrate never) {
<app-footer-links />
}Differenza rispetto a defer semplice
Un normale @defer in un contesto CSR mostra un segnaposto fino al caricamento. Con la hydration incrementale, il contenuto è già renderizzato dal server e visibile; il trigger controlla solo quando viene attivata l'interattività (hydration).
Combinare i trigger
Può combinare i trigger in modo che un blocco venga sottoposto a hydration al verificarsi del primo evento, bilanciando la disponibilità con il risparmio di risorse.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Meno JavaScript iniziale
Rimandando la hydration dei componenti pesanti o sotto la piega, si riduce il JavaScript iniziale necessario per l'interattività, migliorando il time-to-interactive e l'INP nel percorso critico.
Scegliere con criterio i trigger
Sottoponga a hydration gli elementi interattivi above-the-fold in modo eager o durante l'inattività; rimandi i widget below-the-fold e usati raramente al viewport o all'interazione. Misuri i risultati per verificare i miglioramenti.
Verifica rapida
Verifichi la Sua conoscenza della hydration incrementale.
Riepilogo
Ha usato @defer (hydrate ...) con withIncrementalHydration() per eseguire la hydration in base al viewport, all'interazione, all'inattività, a un timer oppure mai. In questo modo riduce il JS iniziale e migliora l'interattività rimandando la hydration dei blocchi sotto la piega e usati raramente.
Domande Frequenti
La lezione «Hydration incrementale con @defer» è gratuita?
Sì — il testo completo di «Hydration incrementale con @defer» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Angular Academy, passa a CoddyKit PRO. Il corso Angular Academy include 4 lezioni in totale.
Cosa imparerò in «Hydration incrementale con @defer»?
Eseguire l'hydration delle parti della pagina su richiesta Eserciti Angular Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Angular Academy?
Non è richiesta alcuna esperienza precedente. Angular Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Hydration incrementale con @defer»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Angular Academy?
Sì. Ogni lezione Angular Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Che cos'è l'hydration
- Abilitare l'hydration completa
- Hydration incrementale con @defer
- Misurare i Core Web Vitals