Förklaring

När Next.js renderar en sida på servern och skickar HTML till webbläsaren förväntar sig React att klientkoden ska producera exakt samma HTML-träd. Om det inte stämmer avbryter React hydreringen och renderar om hela trädet i webbläsaren.

Det vanligaste skälet är att komponenten använder data som skiljer sig åt mellan server och klient. Datum och tidsstämplar är klassiska brottslingar: new Date() ger olika resultat beroende på när och var koden körs. Detsamma gäller Math.random(), localStorage, och innehåll som beror på webbläsarens tidszon.

Felet syns i konsolen som en varning men påverkar faktiskt prestandan eftersom React kastar bort den server-renderade HTML:en och börjar om från scratch i webbläsaren.

Vanliga orsaker

Vanligast är att en komponent läser new Date(), Math.random(), window, eller localStorage direkt i render-fasen. Dessa värden existerar inte på servern, eller ger olika resultat. En annan orsak är webbläsartillägg som modifierar DOM:en innan React hinner hydrera.

Lösning

Flytta det icke-deterministiska anropet till en useEffect som körs enbart på klienten, eller använd ett suppressHydrationWarning-attribut på det specifika elementet om felet är oundvikligt.

// Fel: renderar på server och klient med olika värde
const now = new Date().toLocaleString();

// Rätt: körs bara i webbläsaren
const [now, setNow] = useState("");
useEffect(() => {
  setNow(new Date().toLocaleString());
}, []);

Om felet orsakas av ett webbläsartillägg kan du inte åtgärda det i koden. Testa i en inkognito-flik utan tillägg för att utesluta den orsaken.