react 18+ · JavaScript
Die Meldung
Hydration failed because the initial UI does not match what was rendered on the server
Was es bedeutet
Das vom Server gesendete HTML und das, was der Browser im ersten Render erzeugte, unterscheiden sich — React konnte beides nicht verbinden. new Date() oder Math.random() im Render, ein Lesen von localStorage oder ein Zeichnen nach window-Breite garantieren zwei verschiedene Ergebnisse; ebenso Markup, das der Browser stillschweigend repariert, etwa ein <div> in einem <p>. Die Regel: im ersten Durchgang genau das rendern, was der Server gerendert hat, und erst nach useEffect ändern. Der Preis: dieser Teil erscheint einen Moment später und fehlt im Server-HTML. React 19 formuliert dieselbe Lage als "the server rendered HTML didn't match the client" und zeigt zusätzlich ein Diff der Unterschiede.
Die Lösung
Hier hilft kein Einzeiler. Die Erklärung sagt, worauf zu schauen ist.
- Ausgegeben von
- react 18+
- JavaScript
- 15
Browser- und Node-Fehler nennen meist, was kaputtging, aber nicht, warum der Wert so wurde — Sie haben undefined gelesen, es war keine Funktion, es war kein JSON — die Stelle zum Reparieren liegt also stromaufwärts der werfenden Zeile, und nur diese Zeile mit ?. und Standardwerten stillzulegen lässt dasselbe Problem weiter entfernt und in schwerer erkennbarer Gestalt wiederkehren.
Eine Fehlermeldung lesen
- Von der ersten Zeile abwärts lesen. Weiter unten geht es um das Innere des Werkzeugs; die Ursache steht meist oben.
- Gibt es Datei und Zeilennummer, dort anfangen — nicht der oberste Stack-Frame, sondern die oberste Zeile, die eine eigene Datei nennt.
- Die Meldung wörtlich suchen, vorher aber eigene Pfade und Variablennamen entfernen; genau die verhindern den Treffer.
- Dieselbe Lage wird je Werkzeugversion anders formuliert. Passen die Treffer nicht, die Versionsnummer mit in die Suche.
- Vor dem Einfügen einer Lösung prüfen, was sie verwirft. Manches davon lässt sich nicht zurückholen.
Häufige Fragen
Q. Was bedeutet „Hydration failed because the initial UI does not match what was rendered on the server“?
Das vom Server gesendete HTML und das, was der Browser im ersten Render erzeugte, unterscheiden sich — React konnte beides nicht verbinden. new Date() oder Math.random() im Render, ein Lesen von localStorage oder ein Zeichnen nach window-Breite garantieren zwei verschiedene Ergebnisse; ebenso Markup, das der Browser stillschweigend repariert, etwa ein <div> in einem <p>. Die Regel: im ersten Durchgang genau das rendern, was der Server gerendert hat, und erst nach useEffect ändern. Der Preis: dieser Teil erscheint einen Moment später und fehlt im Server-HTML. React 19 formuliert dieselbe Lage als "the server rendered HTML didn't match the client" und zeigt zusätzlich ein Diff der Unterschiede.
Q. Wie behebe ich das?
Es gibt keinen Einzeiler. Die Erklärung oben sagt, worauf zu schauen ist.
Q. Welches Werkzeug gibt das aus?
react 18+. Es gehört zu JavaScript, und die Meldung hat 15 Wörter.