Hydratation incrémentielle avec @defer
Hydratez les parties de la page à la demande
Hydratation incrémentielle avec @defer est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Angular Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Angular Academy comprend 4 leçons au total.
Le coût de l’hydratation complète
L’hydratation complète démarre tous les composants dès le départ. L’hydratation incrémentale, elle, hydrate à la demande certaines parties de la page et diffère le chargement de JavaScript des sections jusqu’à ce qu’elles soient nécessaires.
Fondée sur defer
L’hydratation incrémentale utilise le bloc @defer avec les déclencheurs spéciaux hydrate. Le serveur continue de rendre le contenu, mais le client ne l’hydrate que lorsqu’un déclencheur s’active.
@defer (hydrate on viewport) {
<app-comments />
}L’activer
Activez-la en ajoutant withIncrementalHydration() au fournisseur d’hydratation. Cela permet d’utiliser les déclencheurs hydrate dans les modèles.
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
providers: [provideClientHydration(withIncrementalHydration())]hydrate sur la fenêtre d’affichage
Le déclencheur le plus courant hydrate un bloc lorsqu’il entre dans la zone visible. Le contenu situé sous la ligne de flottaison reste inactif, ce qui économise du travail JavaScript jusqu’à ce que l’utilisateur l’atteigne.
@defer (hydrate on viewport) {
<app-related-products />
}hydrate lors d’une interaction
Hydratez le bloc lorsque l’utilisateur interagit avec lui (clic, pression d’une touche). C’est idéal pour les composants visibles mais rarement utilisés, comme un panneau extensible.
@defer (hydrate on interaction) {
<app-share-menu />
}hydrate au repos et après un délai
Utilisez hydrate on idle pour hydrater le bloc lorsque le navigateur est disponible, ou hydrate on timer(2s) pour l’hydrater après un délai. Cette approche convient aux zones non critiques.
@defer (hydrate on idle) {
<app-newsletter />
}hydrate jamais
hydrate never conserve le HTML rendu par le serveur sous forme statique : il est affiché, mais aucun code JS n’est chargé pour ce bloc. Cette option est idéale pour un contenu purement visuel et non interactif.
@defer (hydrate never) {
<app-footer-links />
}Différence avec defer simple
Un @defer normal dans un contexte CSR affiche un espace réservé jusqu’au chargement. Avec l’hydratation incrémentale, le contenu est déjà rendu par le serveur et visible ; le déclencheur contrôle uniquement le moment où l’interactivité (l’hydratation) commence.
Combiner les déclencheurs
Vous pouvez combiner les déclencheurs afin qu’un bloc soit hydraté dès que se produit le premier événement, en équilibrant disponibilité et économies de ressources.
@defer (hydrate on viewport; hydrate on interaction) {
<app-map />
}Un volume initial de JS réduit
En différant l’hydratation des composants lourds ou situés sous la ligne de flottaison, vous réduisez le JavaScript initial nécessaire à l’interactivité, ce qui améliore le délai d’interactivité et l’INP sur le chemin critique.
Choisir judicieusement les déclencheurs
Hydratez immédiatement ou au repos les éléments interactifs situés au-dessus de la ligne de flottaison ; différez les composants situés plus bas et les composants rarement utilisés jusqu’à leur entrée dans la zone visible ou jusqu’à une interaction. Mesurez les résultats pour confirmer les gains.
Vérification rapide
Vérifiez vos connaissances sur l’hydratation incrémentale.
Récapitulatif
Vous avez utilisé @defer (hydrate ...) avec withIncrementalHydration() pour hydrater selon la zone visible, une interaction, une période d’inactivité, un délai ou jamais. Cela réduit le JS initial et améliore l’interactivité en différant l’hydratation des blocs situés sous la ligne de flottaison et de ceux rarement utilisés.
Questions Fréquemment Posées
La leçon « Hydratation incrémentielle avec @defer » est-elle gratuite ?
Oui — le texte complet de « Hydratation incrémentielle avec @defer » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Angular Academy, passe à CoddyKit PRO. Le cours Angular Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Hydratation incrémentielle avec @defer » ?
Hydratez les parties de la page à la demande Tu pratiques Angular Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Angular Academy ?
Aucune expérience préalable n'est requise. Angular Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Hydratation incrémentielle avec @defer » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Angular Academy ?
Oui. Chaque leçon Angular Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Qu’est-ce que l’hydratation
- Activer l’hydratation complète
- Hydratation incrémentielle avec @defer
- Mesurer les indicateurs essentiels du Web