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 ?

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 First Contentful Paint.

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).

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).