Hydratation (hydration) : définition et coût

Qu'est-ce que l'hydratation ?

L'hydratation (hydration) est l'étape où le JavaScript du navigateur se rattache au HTML déjà rendu par le serveur. Le framework réutilise le DOM existant, branche les gestionnaires d'événements et reconstruit l'état des composants : une page d'apparence statique devient interactive. C'est la seconde moitié du rendu côté serveur (SSR) dans des frameworks comme React avec Next.js. Son coût explique souvent qu'une page d'apparence rapide réagisse lentement aux clics et aux appuis.

Comment fonctionne l'hydratation

1. Le serveur rend la page en HTML et l'envoie, ce qui permet au navigateur d'afficher du contenu tôt.
2. Le navigateur télécharge, analyse et exécute le paquet JavaScript.
3. Le framework réexécute les composants dans le navigateur et les associe aux nœuds DOM existants. Dans React, c'est hydrateRoot.
4. Les gestionnaires d'événements et l'état sont rattachés. À partir de là, la page est interactive.

Entre les étapes 1 et 4, la page semble prête mais les clics peuvent être ignorés ou retardés. Cet intervalle est le coût de l'hydratation et il apparaît dans l'Interaction to Next Paint (INP). Google évalue l'INP au 75e centile des chargements réels : 200 ms ou moins est bon, plus de 500 ms est mauvais (web.dev).

Exemple

Une fiche produit est rendue côté serveur et s'affiche en moins d'une seconde. Le paquet du framework est volumineux et un widget de chat se charge en même temps. Un visiteur avec un téléphone milieu de gamme appuie sur « Ajouter au panier » alors que l'hydratation tourne encore sur le fil principal. L'appui est mis en file d'attente et le bouton réagit une à deux secondes plus tard. Le HTML du serveur était rapide, pas l'hydratation derrière.

Pourquoi l'hydratation est lente

• Elle réexécute l'arbre de composants dans le navigateur, même pour les parties qui ne changent jamais.
• Le paquet doit d'abord être téléchargé et analysé : plus de JavaScript, c'est un intervalle plus long.
• Elle s'exécute sur le fil principal, qui traite aussi les actions de l'utilisateur.
• Elle est en concurrence avec les images, les scripts tiers et les publicités.
• Elle dépend de l'appareil. Un téléphone peut être plusieurs fois plus lent qu'un portable de développement.

Techniques pour réduire le coût de l'hydratation

• Envoyer moins de JavaScript. Le découpage du code et la suppression du code inutilisé raccourcissent chaque étape.
• Îlots. Astro rend les pages en HTML simple et n'ajoute du JavaScript qu'aux composants portant une directive client:* ; chaque îlot s'hydrate séparément, par exemple au chargement, au repos ou quand il devient visible (documentation Astro).
• Streaming et Suspense. renderToPipeableStream de React envoie d'abord la structure et diffuse le reste au fil des données, de sorte que le contenu apparaît avant le chargement des scripts (documentation React).
• Server Components. Les composants exécutés uniquement côté serveur n'ont pas besoin de JavaScript client propre.
• Reprise (resumability). Qwik met l'exécution en pause sur le serveur et la reprend dans le navigateur au lieu de rejouer la logique de l'application (documentation Qwik).
• Sans hydratation. Les pages purement statiques issues de la génération de sites statiques n'en ont pas besoin, et le chargement différé du code hors écran allège le premier chargement.

Erreurs courantes d'hydratation

• Écarts d'hydratation (mismatch). Le rendu client doit produire la même sortie que le serveur. Causes typiques : horodatages et formats selon la locale, API propres au navigateur comme window.matchMedia utilisées pendant le rendu, et tests typeof window dans la logique de rendu. React les traite comme des bogues : il peut s'en remettre, mais cela peut ralentir l'application ou rattacher des gestionnaires aux mauvais éléments (documentation React).
• Corriger les écarts par un second rendu. Changer le contenu dans useEffect fonctionne, mais les composants sont rendus deux fois et l'interface peut changer visiblement après le chargement. suppressHydrationWarning est réservé à des éléments isolés.
• Tout hydrater. Les parties de simple contenu, comme les pieds de page et le texte des articles, ont rarement besoin de JavaScript.
• Initialisation d'état lourde au démarrage et scripts tiers synchrones retardent l'interactivité.
• Tester uniquement sur un portable rapide. Les problèmes d'hydratation se voient sur de vrais téléphones milieu de gamme.

Mesurer l'hydratation avec la supervision

L'hydratation ne se voit pas sur une capture d'écran, il faut la mesurer. Le vérificateur gratuit de Core Web Vitals affiche le LCP, l'INP et le CLS d'utilisateurs réels à partir des données du Chrome UX Report, agrégées sur 28 jours. Pour des données de laboratoire, la supervision de la vitesse de page lance des audits Lighthouse depuis 25 régions cloud, suit le Total Blocking Time (une métrique de laboratoire qui reflète le travail du fil principal comme l'hydratation) et peut vous alerter en cas de régression. Voir aussi surveiller les Core Web Vitals avec alertes et rapports et maîtriser JavaScript pour la performance (articles en anglais).

Questions fréquentes : hydratation

Pourquoi l'hydratation est-elle nécessaire ?

Le HTML rendu côté serveur n'est que du balisage. L'hydratation ajoute le JavaScript qui le rend interactif, avec gestionnaires d'événements, état et effets, sans jeter le HTML que l'utilisateur voit déjà.

Quelle différence entre rendu et hydratation ?

Le rendu produit le HTML. L'hydratation rattache du JavaScript à un HTML qui existe déjà. En SSR, le serveur rend d'abord, puis l'hydratation suit dans le navigateur.

Qu'est-ce qu'un écart d'hydratation ?

Il survient quand le HTML du serveur diffère de ce que le client rend la première fois, par exemple à cause d'un horodatage ou d'une valeur propre au navigateur. React affiche un avertissement et peut devoir refaire du travail côté client.

L'hydratation influence-t-elle le SEO ?

Indirectement. Les moteurs peuvent lire le HTML du serveur, mais une hydratation lente dégrade la réactivité et donc l'INP, qui fait partie des Core Web Vitals.

Peut-on éviter complètement l'hydratation ?

Oui pour les pages sans interaction, comme des pages de contenu statiques. Pour les pages interactives, on peut la limiter avec des îlots, des Server Components ou un framework à reprise comme Qwik.

Comment savoir si l'hydratation pénalise mon site ?

Vérifiez l'INP dans les données de terrain et le Total Blocking Time dans un audit Lighthouse, puis profilez le fil principal sur un téléphone milieu de gamme pour repérer les tâches longues juste après le chargement.