Erreurs d’hydratation : causes et corrections
Identifiez les divergences entre le HTML serveur et client et corrigez-les avec suppressHydrationWarning.
Erreurs d’hydratation : causes et corrections est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Qu’est-ce qu’une erreur d’hydratation ?
Une erreur d’hydratation se produit lorsque le HTML généré par le serveur par React ne correspond pas au DOM virtuel que React attend côté client. React consigne un avertissement et effectue à nouveau le rendu du composant depuis zéro, ce qui provoque un clignotement.
Cause courante 1 : valeurs aléatoires
Utiliser Math.random(), Date.now() ou crypto.randomUUID() pendant le rendu produit des valeurs différentes sur le serveur et le client.
// Bad — different on server vs client:
<div id={Math.random().toString()}>...</div>
// Fix — use useId() (stable across server/client):
import { useId } from 'react';
function Component() {
const id = useId();
return <div id={id}>...</div>;
}Cause courante 2 : API réservées au navigateur
Lire localStorage, window.innerWidth ou navigator pendant le rendu provoque une erreur sur le serveur ou produit des valeurs différentes.
// Bad — localStorage doesn't exist on server:
<div>{localStorage.getItem('theme')}</div>
// Fix — read in useEffect (client-only):
const [theme, setTheme] = useState('light');
useEffect(() => {
setTheme(localStorage.getItem('theme') ?? 'light');
}, []);Cause courante 3 : formatage de la date et de l’heure
Le formatage des dates selon la langue et la région renvoie des chaînes différentes sur le serveur (langue UTC/Node.js) et sur le client (langue du navigateur).
// Risky — locale may differ:
<time>{new Date().toLocaleDateString()}</time>
// Fix — use a consistent locale:
<time>{new Date().toLocaleDateString('en-US', { timeZone: 'UTC' })}</time>Cause courante 4 : imbrication HTML invalide
React génère le HTML client à partir du DOM virtuel, mais une imbrication HTML invalide (par exemple, <p> dans <p>) amène les navigateurs à restructurer le DOM différemment, ce qui provoque des différences.
// Bad — browser auto-closes the nested <p>:
<p>Outer <p>Inner</p> text</p>
// Fix — use <div> or correct semantic elements:
<div>Outer <p>Inner</p> text</div>Cause courante 5 : rendu conditionnel fondé sur l’état
Les composants qui effectuent un rendu différent selon un état propre au client (comme l’authentification de l’utilisateur ou la largeur de l’écran) ne correspondent pas, car le serveur effectue le rendu sans cet état.
// Bad — server renders 'Guest', client re-renders 'Alice' immediately:
<h1>{user?.name ?? 'Guest'}</h1>
// Fix — use a mounted guard to defer client-only rendering:
const [mounted, setMounted] = useState(false);
useEffect(() => setMounted(true), []);
if (!mounted) return <h1>Guest</h1>; // match server outputsuppressHydrationWarning
Utilisez suppressHydrationWarning sur les éléments où les différences sont intentionnelles (par exemple, les horodatages formatés côté client). Cela masque l’avertissement uniquement pour cet élément.
<time suppressHydrationWarning dateTime={isoDate}>
{new Date(isoDate).toLocaleString()}
</time>Importation dynamique avec ssr: false
Dans Next.js, utilisez dynamic(fn, { ssr: false }) pour empêcher complètement le rendu d’un composant sur le serveur — ce qui élimine les différences d’hydratation pour les composants réservés au client.
import dynamic from 'next/dynamic';
const ClientOnlyChart = dynamic(() => import('./Chart'), { ssr: false });
export default function Dashboard() {
return <ClientOnlyChart />; // only renders in the browser
}Déboguer les erreurs d’hydratation
React 18 consigne des messages détaillés sur les erreurs d’hydratation en mode développement, en indiquant précisément le nœud DOM différent. Utilisez les DevTools du navigateur pour comparer le HTML du serveur à l’arbre React.
useId pour des identifiants stables
useId() génère des identifiants stables et uniques, cohérents entre les rendus du serveur et du client — utilisez-le pour les paires id/htmlFor et les attributs ARIA.
function FormInput({ label }: { label: string }) {
const id = useId();
return (
<div>
<label htmlFor={id}>{label}</label>
<input id={id} />
</div>
);
}Tester les erreurs d’hydratation
Exécutez votre application Next.js en mode développement (npm run dev) et surveillez la console du navigateur. Les différences d’hydratation apparaissent sous forme d’avertissements rouges accompagnés de traces de la pile des composants.
Vérification rapide
Quelle est la meilleure solution pour un composant qui effectue un rendu différent côté serveur et côté client parce qu’il lit localStorage ?
Récapitulatif
Les différences d’hydratation proviennent de valeurs aléatoires, d’API réservées au navigateur, du formatage dépendant de la langue et de la région, d’une imbrication HTML invalide et d’un rendu conditionnel propre au client. Corrigez-les avec useId(), useEffect pour l’état propre au client, suppressHydrationWarning pour les différences intentionnelles et dynamic({ ssr: false }) pour les composants réservés au client.
Apprends React avec un tuteur IA — gratuit
Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.
- Cours
- 88
- Leçons
- 324
Questions Fréquemment Posées
La leçon « Erreurs d’hydratation : causes et corrections » est-elle gratuite ?
Oui — le texte complet de « Erreurs d’hydratation : causes et corrections » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Erreurs d’hydratation : causes et corrections » ?
Identifiez les divergences entre le HTML serveur et client et corrigez-les avec suppressHydrationWarning. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Erreurs d’hydratation : causes et corrections » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Fonctionnement interne du SSR React
- Erreurs d’hydratation : causes et corrections
- Hydratation sélective et HTML diffusé en continu
- Modèle d’architecture en îlots