Activer l’hydratation complète
Activez l’hydratation pour éviter un nouveau rendu
Activer l’hydratation complète est une leçon Angular Academy gratuite sur CoddyKit. Ceci est la leçon 2 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.
Activer l’hydratation
L’hydratation complète est activée en ajoutant provideClientHydration() aux fournisseurs de votre application. Le schéma ng add @angular/ssr l’ajoute automatiquement.
import { provideClientHydration } from '@angular/platform-browser';
export const appConfig = {
providers: [provideClientHydration()]
};Emplacement
Elle doit figurer dans les fournisseurs de appConfig du navigateur, la même configuration que celle utilisée pour démarrer le client. La configuration du serveur vient s’y superposer avec provideServerRendering().
Ce que signifie complète
L’hydratation complète (immédiate) hydrate toute l’arborescence des composants dès que JavaScript est chargé et qu’Angular démarre. Chaque composant devient interactif en même temps.
Relecture des événements
Activez withEventReplay() afin que les interactions de l’utilisateur survenant avant la fin de l’hydratation soient capturées puis rejouées ensuite, ce qui évite de perdre des clics sur les appareils lents.
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
providers: [provideClientHydration(withEventReplay())]Cache de transfert HTTP
Lorsque l’hydratation est activée, les réponses GET de HttpClient provenant du serveur sont mises en cache dans TransferState par défaut. Le client ne récupère donc pas à nouveau les mêmes données après son démarrage.
provideClientHydration(withHttpTransferCacheOptions({ filter: r => r.method === 'GET' }))Vérifier l’hydratation
Ouvrez la console en mode développement. Angular consigne les statistiques d’hydratation (composants hydratés, nœuds réutilisés). L’absence d’avertissements d’incohérence signifie que l’hydratation s’est déroulée correctement.
// Angular hydrated 24 component(s) and 187 node(s)Corriger les incohérences
Si vous voyez des erreurs d’incohérence NG0500, recherchez les modèles non déterministes ou les modifications manuelles du DOM. Rendez le balisage déterministe afin que les sorties du serveur et du client correspondent.
Protéger les API du navigateur
Le code qui accède à window ou localStorage pendant le rendu initial peut modifier le balisage entre le serveur et le client. Protégez-le avec isPlatformBrowser ou exécutez-le après l’initialisation de la vue.
if (isPlatformBrowser(this.platformId)) {
this.width = window.innerWidth;
}Compromis de l’hydratation complète
L’hydratation complète est simple, mais elle télécharge et exécute dès le départ le code JavaScript de tous les composants. Pour les grandes applications, cela peut retarder l’interactivité, un problème auquel répond l’hydratation incrémentale.
i18n et hydratation
L’hydratation fonctionne avec l’i18n d’Angular, mais veillez à ce que le contenu traduit soit déterministe. Des paramètres régionaux différents entre le serveur et le client provoquent des erreurs d’hydratation.
Vérification avant mise en production
Avant la mise en production, effectuez une compilation de production, servez la sortie SSR, puis vérifiez dans le réseau et la console que l’hydratation s’exécute sans incohérences et que le cache de transfert évite les doubles récupérations.
Vérification rapide
Vérifiez vos connaissances sur l’hydratation complète.
Récapitulatif
Vous avez activé l’hydratation complète avec provideClientHydration(), ajouté withEventReplay() pour les clics précédant l’hydratation, utilisé le cache de transfert HTTP, protégé les API du navigateur et vérifié que l’hydratation s’effectue correctement. L’hydratation complète est simple, mais elle charge tout le code JS dès le départ.
Questions Fréquemment Posées
La leçon « Activer l’hydratation complète » est-elle gratuite ?
Oui — le texte complet de « Activer l’hydratation complète » 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 « Activer l’hydratation complète » ?
Activez l’hydratation pour éviter un nouveau rendu 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 2 sur 4.
Combien de temps prend la leçon « Activer l’hydratation complète » ?
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