react 18+ · JavaScript
Le message
Hydration failed because the initial UI does not match what was rendered on the server
Ce que cela veut dire
Le HTML envoyé par le serveur et ce que le navigateur a produit à son premier rendu diffèrent : React n'a pas pu rattacher l'un à l'autre. Utiliser new Date() ou Math.random() pendant le rendu, lire localStorage, ou dessiner selon la largeur de window garantit deux réponses différentes — de même qu'un balisage que le navigateur répare en silence, comme un <div> dans un <p>. La règle est de rendre au premier passage exactement ce que le serveur a rendu, puis de changer après l'exécution de useEffect ; le prix est que cette partie apparaît un instant plus tard et manque au HTML du serveur. React 19 formule la même situation en "the server rendered HTML didn't match the client" et affiche un diff de ce qui différait.
Le correctif
Pas de commande en une ligne ici. L’explication dit où regarder.
- Émis par
- react 18+
- JavaScript
- 15
Les erreurs du navigateur et de Node disent d'ordinaire ce qui a cassé et non pourquoi la valeur est devenue telle — vous avez lu undefined, ce n'était pas une fonction, ce n'était pas du JSON — l'endroit à corriger se trouve donc en amont de la ligne qui a levé l'erreur, et faire taire cette seule ligne avec ?. et des valeurs par défaut fait revenir le même problème plus loin, sous une forme plus difficile à reconnaître.
Lire un message d’erreur
- Lisez à partir de la première ligne. Plus on descend, plus il s’agit des entrailles de l’outil ; la cause est généralement en haut.
- S’il y a un fichier et un numéro de ligne, commencez là — pas la première image de la pile, mais la ligne la plus haute qui nomme un fichier de vous.
- Cherchez le message tel quel, mais retirez d’abord vos chemins et vos noms de variables : c’est cela qui empêche la correspondance.
- La même situation se formule autrement selon la version de l’outil. Si les résultats sonnent faux, ajoutez le numéro de version.
- Avant de coller un correctif, vérifiez ce qu’il jette. Certains sont irréversibles.
Questions fréquentes
Q. Que veut dire « Hydration failed because the initial UI does not match what was rendered on the server » ?
Le HTML envoyé par le serveur et ce que le navigateur a produit à son premier rendu diffèrent : React n'a pas pu rattacher l'un à l'autre. Utiliser new Date() ou Math.random() pendant le rendu, lire localStorage, ou dessiner selon la largeur de window garantit deux réponses différentes — de même qu'un balisage que le navigateur répare en silence, comme un <div> dans un <p>. La règle est de rendre au premier passage exactement ce que le serveur a rendu, puis de changer après l'exécution de useEffect ; le prix est que cette partie apparaît un instant plus tard et manque au HTML du serveur. React 19 formule la même situation en "the server rendered HTML didn't match the client" et affiche un diff de ce qui différait.
Q. Comment le corriger ?
Pas de commande en une ligne. L’explication ci-dessus dit où regarder.
Q. Quel outil émet cela ?
react 18+. Cela relève de JavaScript, et le message compte 15 mots.