Förklaring

Det här felet liknar det generella hydreringsfelet men är specifikt för textinnehåll. React jämför textnoder och hittar en skillnad mellan vad servern skickade och vad klienten försöker rendera.

Olika lokalisering är en vanlig orsak: om en komponent formaterar ett datum med toLocaleDateString() kan server och klient använda olika locale-inställningar beroende på systemkonfigurationen. Internationella tecken och formatering av siffror beter sig likadant.

Precis som med hydration-failed innebär felet att React kastar bort server-HTML och renderar om komponenten i webbläsaren.

Vanliga orsaker

Datumformatering med toLocaleDateString() eller toLocaleString() utan explicit locale. Textinnehåll som hämtas från localStorage eller cookies. Översättningsbibliotek som laddar locale-data asynkront.

Lösning

Ange alltid explicit locale när du formaterar datum eller siffror:

// Fel
date.toLocaleDateString()

// Rätt: explicit locale ger samma resultat på server och klient
date.toLocaleDateString("sv-SE", { year: "numeric", month: "long" })

Om textinnehållet beror på klient-state, flytta renderingen till en 'use client'-komponent med useEffect och rendera ett tomt eller skeleton-tillstånd som server-fallback.