Eine Seite wirft in Produktion einen Hydration Mismatch. Wie spürst du ihn auf?

Ein Mismatch heißt, das auf dem Server gerenderte HTML passt nicht zum ersten Client-Render. Übliche Ursachen sind Datums- und Locale-Formatierung, Zufallswerte, Zugriffe auf window oder localStorage während des Renders und ungültige HTML-Verschachtelung, die der Browser stillschweigend repariert. Lies den Diff, den React loggt, um die Node zu finden, und verschieb den Wert dann entweder in einen Effect, damit der erste Render passt, oder render den Teil nur auf dem Client.

Zuerst lese ich den Fehler richtig, denn React 19 gibt dir einen brauchbaren Diff, der zeigt, welche Node abweicht, und das reicht meist, um den Schuldigen zu benennen. Dann gehe ich die Verdächtigen durch. Alles Zeitbasierte ist Nummer eins, also ein formatiertes Datum oder ein relativer Zeitstempel, auf dem Server in der einen Sekunde gerendert und auf dem Client in der nächsten. Danach Locale- und Zeitzonen-Formatierung, denn der Server läuft fast immer in UTC. Dann zufällige IDs oder Math.random in einer Komponente. Dann alles, was während des Renders window, matchMedia oder localStorage liest, was bei Theme-Togglern häufig ist. Und zuletzt ungültige Verschachtelung, etwa ein div in einem p, wo der Browser das HTML repariert, bevor React es sieht. Der Fix hängt davon ab, welcher es ist. Bei wirklich clientseitigen Werten rendere ich auf dem Server einen stabilen Platzhalter und setze den echten Wert in einem Effect, oder ich lade das Stück lazy mit abgeschaltetem Server-Rendering. Zu suppressHydrationWarning greife ich nur bei einem einzelnen Blatt wie einem Zeitstempel, nie bei einem Wrapper.