Understanding & Fixing FOUC in Next.js App Router (2025 Guide)

FOUC, or Flash of Unstyled Content, is a visual glitch in React apps where unstyled content appears briefly during loading. It occurs when HTML renders before CSS is applied, often due to mismatches between server-rendered HTML and client-rendered UI in frameworks like Next.js. Symptoms include raw HTML displaying before styles kick in and CSS variables not applying immediately. Common causes include dynamic theming, using `Date.now()` or `Math.random()` in shared components, and importing CSS libraries too late. To fix FOUC, always import global CSS in `layout.tsx` to ensure styles load early. Providing fallback theme styles in `globals.scss` prevents unstyled elements from flashing. Using a hydration guard delays rendering until the client takes over, preventing mismatches. Avoid dynamic CSS imports, using `Date.now()` or `Math.random()` directly in render, and reading from `localStorage` or `window` in server components. Separating server logic from client-specific rendering eliminates style flashes and hydration warnings.