Verständnis und Behebung von FOUC in Next.js App-Router (Leitfaden 2025)

FOUC, oder Flash of Unstyled Content, ist ein visuelles Fehlverhalten in React-Apps, bei dem unformatierter Inhalt während des Ladens kurzzeitig erscheint. Es tritt auf, wenn HTML vor der Anwendung von CSS gerendert wird, oft aufgrund von Ungleichheiten zwischen serverseitig gerendertem HTML und clientseitig gerendertem UI in Frameworks wie Next.js. Symptome umfassen das Anzeigen von rohem HTML, bevor Stile aktiviert werden, und das Nicht-Anwenden von CSS-Variablen sofort. Häufige Ursachen sind dynamische Theming, die Verwendung von `Date.now()` oder `Math.random()` in gemeinsamen Komponenten und das Zu-Spät-Importieren von CSS-Bibliotheken. Um FOUC zu beheben, sollten Sie globale CSS immer in `layout.tsx` importieren, um sicherzustellen, dass Stile frühzeitig geladen werden. Die Bereitstellung von Fallback-Themestilen in `globals.scss` verhindert, dass unformatierte Elemente blinken. Die Verwendung eines Hydrations-Wächters verzögert das Rendering, bis der Client die Kontrolle übernimmt, und verhindert Ungleichheiten. Vermeiden Sie dynamische CSS-Imports, die direkte Verwendung von `Date.now()` oder `Math.random()` im Render und das Lesen aus `localStorage` oder `window` in Server-Komponenten. Die Trennung von Server-Logik von clientseitiger Rendering eliminiert Stil-Blitze und Hydrationswarnungen.