Angular 19 : hydration incrémentale

L'hydration classique et ses limites

Le SSR (Server-Side Rendering) Angular génère du HTML côté serveur, puis le client "hydrate" la page en attachant les écouteurs d'événements et en initialisant les composants Angular. Avec l'hydration complète (disponible depuis Angular 16), Angular réutilise le DOM existant au lieu de le recréer.

Problème : même avec l'hydration complète, Angular hydrate toute la page d'un coup. Pour une page complexe, cela peut bloquer le fil principal pendant plusieurs centaines de millisecondes.

Qu'est-ce que l'hydration incrémentale

Avec l'hydration incrémentale d'Angular 19, les composants marqués avec @defer restent dans leur état "déshydraté" après le chargement initial de la page. Angular ne charge leur JavaScript et ne les hydrate que lorsqu'un trigger est déclenché (viewport, hover, interaction...).

Cela signifie que le HTML est présent dès le début (donc le SEO est préservé), mais le JavaScript interactif n'est chargé que quand nécessaire.

Configuration dans Angular 19

L'hydration incrémentale nécessite d'activer l'hydration complète d'abord, puis d'ajouter le support de l'hydration incrémentale :

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration, withIncrementalHydration } from '@angular/platform-browser';
import { provideRouter } from '@angular/router';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideClientHydration(
      withIncrementalHydration()
    ),
  ]
};

@defer et l'hydration incrémentale

Une fois withIncrementalHydration() activé, les blocs @defer dans les templates SSR fonctionnent automatiquement en mode hydration incrémentale. Le serveur rend le HTML complet (y compris le contenu du @defer), mais le JavaScript du composant différé n'est téléchargé que côté client.

<!-- Ce composant est rendu en HTML par le serveur -->
<!-- Son JS n'est hydraté que quand il entre dans le viewport -->
@defer (on viewport; hydrate on viewport) {
  <app-comments-section />
} @placeholder {
  <div class="comments-skeleton"></div>
}

Sans withIncrementalHydration(), le bloc @defer en SSR ne renvoie que le @placeholder. Avec l'hydration incrémentale, il renvoie le vrai contenu HTML.

Triggers d'hydration

Les triggers d'hydration se configurent avec hydrate on dans le bloc @defer :

<!-- Hydrater quand visible -->
@defer (on viewport; hydrate on viewport) {
  <app-footer-widget />
}

<!-- Hydrater au survol -->
@defer (on hover; hydrate on hover) {
  <app-mega-menu />
}

<!-- Hydrater immédiatement (comportement par défaut) -->
@defer (hydrate on idle) {
  <app-critical-section />
}

<!-- Ne jamais hydrater (statique pur) -->
@defer (hydrate never) {
  <app-static-footer />
}

Impact sur les performances

L'hydration incrémentale améliore directement plusieurs métriques Core Web Vitals :

• TBT (Total Blocking Time) : drastiquement réduit car l'hydration est étalée dans le temps
• TTI (Time to Interactive) : amélioré car seul le critique est hydraté immédiatement
• INP (Interaction to Next Paint) : meilleur car le thread principal n'est pas bloqué par une hydration massive
• LCP : inchangé ou amélioré car le HTML est disponible dès le premier rendu serveur