Pourquoi mon site « clignote » au chargement ?

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.

L'hydratation impacte-t-elle le SEO ?

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.

Peut-on éviter l'hydratation sur certaines parties ?

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.

Qu'est-ce que Hydratation React ?

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 ; avec l’App Router, les Server Components peuvent livrer du HTML sans tout passer par l’hydratation client — ce qui réduit le JavaScript à charger. Les erreurs viennent souvent de contenu dynamique (date, random) ou de scripts tiers qui modifient le DOM avant l'hydratation. Pour aller plus loin côté produit : Applications Web & SaaS.

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.

L'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 vs Erreurs communes

✅ À faire : 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.
❌ À éviter : 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).