En bref. L’hydratation rend le contenu généré côté serveur interactif en rattachant la logique des composants côté navigateur au HTML existant.

Définition : L’hydratation (hydration) rattache la logique des composants côté navigateur au HTML déjà généré sur le serveur, ce qui rend ce contenu interactif. Dans React, l’hydratation réutilise le HTML existant et le relie aux gestionnaires d’événements de l’application.

Points clés

Au 17 octobre 2026, la documentation de hydrateRoot de React exige que le rendu initial dans le navigateur corresponde au contenu rendu côté serveur.
La référence de renderToString de React décrit la sortie du serveur comme du HTML initial non interactif, que le navigateur hydrate ensuite.
Le guide des bases du SEO JavaScript de Google, mis à jour le 4 mars 2026, recommande le rendu côté serveur ou le prérendu, car certains robots ne peuvent pas exécuter JavaScript.

Comment fonctionne l’hydratation dans React ?

Le rendu côté serveur (server-side rendering) génère le HTML avant que le navigateur n’exécute le JavaScript de l’application. La référence de renderToString de React présente une méthode côté serveur qui convertit un arbre de composants en une chaîne HTML destinée à la réponse. Cette sortie fournit le contenu initial ; l’hydratation côté navigateur apporte la logique d’interaction de React.

Le code suivant, exécuté dans le navigateur, correspond à l’exemple de hydrateRoot de React. App est le composant racine de l’application et root identifie le conteneur HTML existant :

import { hydrateRoot } from 'react-dom/client';
import App from './App.js';

hydrateRoot(document.getElementById('root'), <App />);

Cet appel rattache React au contenu du conteneur et lui confie la gestion du HTML qu’il contient. La même documentation explique que les internautes peuvent voir le HTML généré par le serveur pendant le chargement du JavaScript.

Quelles sont les causes d’une erreur d’hydratation ?

Une erreur d’hydratation (hydration mismatch) survient lorsque le rendu initial du navigateur diffère de celui du serveur. La référence de hydrateRoot de React mentionne notamment des données différentes entre le serveur et le navigateur, des espaces superflus autour du HTML généré et une logique de rendu propre au navigateur. Elle cite par exemple window.matchMedia, une API du navigateur, comme source possible de différences lorsqu’elle intervient pendant le rendu.

En mode développement, React signale ces écarts et les considère comme des bugs à corriger. La récupération après une telle erreur peut ralentir l’application ; les gestionnaires d’événements peuvent aussi se rattacher aux mauvais éléments. Examiner les avertissements en mode développement et comparer les données utilisées pour le rendu côté serveur et le rendu initial du navigateur découle directement de ces défaillances documentées.

Que change l’hydratation pour les robots d’exploration ?

La documentation de Google sur le SEO JavaScript distingue les pages dont la réponse HTML contient le contenu des structures d’application (app shells) dont le contenu apparaît grâce à JavaScript. Google exécute JavaScript lors du rendu et utilise le HTML rendu pour l’indexation.

Pour un site qui utilise l’hydratation, un contrôle pratique consiste à comparer le HTML de la réponse au contenu après exécution de JavaScript. Cette comparaison découle de la distinction faite par Google entre le contenu de la réponse et le contenu rendu : le texte de fond déjà présent dans la réponse est disponible avant l’exécution des scripts du navigateur. La même documentation invite les propriétaires de sites à examiner le HTML rendu avec le test des résultats enrichis (Rich Results Test) ou l’outil d’inspection d’URL (URL Inspection Tool). Ces contrôles portent sur la disponibilité du contenu pour Google ; ils ne mesurent pas sa sélection par un moteur de réponse fondé sur l’IA.

Termes associés

Questions fréquentes

Faut-il appeler hydrateRoot avec un framework ?

La documentation de hydrateRoot de React indique qu’un framework peut effectuer cet appel pour vous. Vérifiez la configuration du framework avant d’ajouter manuellement un appel d’hydratation.

Pourquoi createRoot remplace-t-il votre contenu rendu côté serveur ?

Les conseils de dépannage de createRoot de React expliquent que la création d’une racine suivie d’un appel à root.render recrée le HTML existant rendu côté serveur. Cela peut réinitialiser le focus et les positions de défilement ou faire perdre les données saisies ; utilisez hydrateRoot pour le HTML déjà généré par React sur le serveur.

Sources

Vérifiez comment une page se lit pour les moteurs de réponse. Ouvrir l’analyseur de score GEO

Hydratation