Flash of Unstyled/Unloaded Content (FOUC) in CSR occurs when raw HTML or loading states briefly appear before JavaScript loads and hydrates, which can be prevented through SSR/SSG, skeleton screens, CSS optimization, and critical CSS inlining
Flash of Unstyled Content (FOUC) and Flash of Unloaded Content are visual glitches in Client-Side Rendering where users briefly see unstyled HTML, loading spinners, or incomplete layouts before React hydrates and replaces them with the final UI . This happens because CSR delivers a minimal HTML shell first, then downloads JavaScript, executes it, and finally renders content—leaving a gap where the page appears broken or empty . In Next.js, this is less severe than pure CSR because of automatic server rendering, but can still occur with client-only components, dynamic imports, or slow network conditions .
Flash of Unstyled Content (FOUC): Raw HTML appears with browser default styling before CSS loads, causing jarring visual shifts .
Flash of Unloaded Content (FOULC): Loading spinners or placeholders appear while data fetches, then suddenly replace with content .
Flash of Incorrect Layout: Content loads but layout shifts dramatically as images or dynamic content populate .
Unlike pure CSR apps, Next.js automatically pre-renders pages on the server, delivering complete HTML with styles already applied. This eliminates FOUC for most pages. However, problems arise when using client-only components with ssr: false, dynamic imports without proper placeholders, or data fetching that shows loading states before content . These patterns create moments where the user sees loading UI instead of content.
FOUC specifically refers to unstyled HTML appearing before CSS loads. In Next.js, this can happen with global CSS imports or CSS-in-JS libraries. Prevent it by inlining critical CSS for above-the-fold content . Next.js automatically inlines critical CSS for each page, but you can optimize further by using the @next/plugin-google-fonts or manually extracting critical CSS with tools like critters.
The most effective prevention is using SSR/SSG for critical content. When pages are server-rendered, users receive complete HTML immediately—no FOUC . For interactive elements that must be client-only, ensure they have skeleton screens that match the final content dimensions and layout . The key is making the loading state visually similar to the loaded state so transitions feel smooth rather than flashy.
Prefer SSR/SSG over client-only rendering for content users should see immediately .
Use loading skeletons that match the dimensions and layout of final components .
Avoid ssr: false for above-the-fold content—use it only for heavy, non-critical components .
Implement CSS transitions for opacity or height changes to smooth content appearance .
Use the Web Vitals metrics to monitor Layout Shift (CLS) and catch FOUC issues .