Développement Web
Qu’est-ce que Hydratation React ?
Phase où React « reprend la main » sur du HTML déjà rendu côté serveur (SSR ou SSG) : il attache les écouteurs d'événements et rend les composants interactifs.
Définition simple
C'est comme brancher l'électricité dans une maison déjà montée au gros œuvre : le HTML est posé, React active enfin boutons et interactivité. Phase où React « reprend la main » sur du HTML déjà rendu côté serveur (SSR ou SSG) : il attache les écouteurs d'événements et rend les composants interactifs. Sans hydratation correcte, le contenu s'affiche puis « clignote » ou ne répond pas aux clics. Une hydratation lente ou désynchronisée (contenu serveur ≠ client) dégrade l'expérience et les Core Web Vitals (INP). Les frameworks comme Next.js gèrent l'hydratation ; les erreurs viennent souvent de contenu dynamique (date, random) ou de scripts tiers qui modifient le DOM avant l'hydratation.
Comment ça marche ?
Le serveur envoie du HTML pré-rendu. Le JavaScript React se charge, lit le DOM existant et « s'y attache » : il associe chaque nœud à un composant React et attache les événements. Si le DOM a été modifié entre-temps (par un script ou une donnée différente), React peut signaler un mismatch. L'hydratation se fait en général après le FCP (First Contentful Paint).
Impact business
Un site qui clignote ou dont les boutons ne réagissent pas tout de suite donne une impression de site « cassé » ou lent. Les utilisateurs quittent et Google pénalise l'expérience. Comprendre l'hydratation permet d'éviter les bugs subtils après déploiement et d'optimiser le chargement des composants interactifs (lazy hydration, islands). Sur le terrain, faire passer l'INP d'une page SSR React de la zone « à améliorer » au vert sur mobile se traduit souvent par une sensation de réactivité immédiate sur les clics — un levier direct sur l'engagement des composants au-dessus du pli.
Bonnes pratiques
- Garantir que le rendu serveur et client produisent le même HTML pour une même donnée. Utiliser useEffect pour le code dépendant du navigateur. Tester en production-like (build) pour détecter les mismatches.
Erreurs communes
- Générer du contenu différent côté serveur et client (Date.now(), Math.random(), accès à window). Inclure des scripts tiers qui modifient le DOM avant l'hydratation. Ne pas résoudre les warnings de mismatch en développement.
Prompt IA
Contexte : site [Next.js / autre], symptôme [clignotement / boutons inactifs au chargement]. Explique ce qu'est l'hydratation React en une phrase. Donne 3 causes fréquentes de mismatch hydration (serveur vs client) et comment les corriger. Propose une vérification rapide (outils DevTools, message d'erreur React).
SERVICE LIÉ
Passer de la définition à un projet concret.
Application web & SaaS
Approfondir ce sujet dans le cadre d’un accompagnement adapté à votre contexte.
À LIRE AUSSI
Guides plus complets sur le blog.
QUESTIONS FRÉQUENTES
Aller plus loin sur Hydratation React.
Souvent un problème d'hydratation : le HTML initial s'affiche, puis React le remplace ou le modifie en s'attachant, ce qui provoque un flash. Vérifiez les mismatches (console), les contenus dynamiques (date, locale) et les scripts tiers qui touchent au DOM.
Le contenu envoyé par le serveur est déjà indexable. En revanche, une hydratation lente ou des erreurs dégradent l'INP (réactivité) et l'expérience utilisateur, ce qui peut impacter indirectement le classement. Optimiser l'hydratation (réduire le JS, lazy components) améliore les Core Web Vitals.
Oui. Les architectures « islands » (Astro, parties de Next.js) permettent de n'hydrater que certains composants. Les zones purement statiques restent en HTML ; seules les parties interactives chargent React. Cela réduit le coût et accélère la page.