Next.js · Senior · Frage 40 von 75
Eine Komponente zeigt new Date().toLocaleString() und verursacht einen Hydration-Mismatch. Was ist die richtigste Lösung?
- 1Die Zeit nach dem Mounten zeigen oder sie auf dem Server festlegen
- 2Die Komponente in
React.memopacken, damit sie nicht neu rendert - 3Die Hydration für die ganze Seite über eine Option in
next.configabschalten
Antwort zeigen
Richtige Antwort: Die Zeit nach dem Mounten zeigen oder sie auf dem Server festlegen
Erklärung
Server und Client liegen in verschiedenen Zeitzonen und Zeitpunkten, also unterscheidet sich der String. Optionen: eine Client Component, die die Zeit nach dem Mounten zeigt; Formatieren auf dem Server mit fester Zone; suppressHydrationWarning am Element mit dem Zeitstempel. Auch Browser-Erweiterungen verursachen oft Mismatches.