What is the "flash of unstyled/unloaded content" problem in CSR, and how do you prevent it?

Question

Accepted Answer

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. ```jsx // ❌ PROBLEM: Creates FOUC/FOULC // pages/profile.js import dynamic from 'next/dynamic'; // This component won't render on server const UserDashboard = dynamic( () => import('../components/UserDashboard'), { ssr: false } ); export default function ProfilePage() { return (

Profile

{/* Shows nothing until JS loads, then appears */}

); } // Result: User sees only

Profile

for up to seconds, // then dashboard suddenly appears (flash of empty space) ``` ```jsx // ✅ SOLUTION: Use loading fallback with same dimensions import dynamic from 'next/dynamic'; import { DashboardSkeleton } from '../components/Skeletons'; const UserDashboard = dynamic( () => import('../components/UserDashboard'), { ssr: false, loading: () => // Matches final layout } ); export default function ProfilePage() { return (

Profile

); } // components/Skeletons.tsx export function DashboardSkeleton() { return (

); } // CSS for skeleton matches final component dimensions .dashboard-skeleton { height: 400px; width: 100%; } ``` 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`. ```jsx // app/page.tsx // ✅ Use Suspense with loading UI for better experience import { Suspense } from 'react'; import dynamic from 'next/dynamic'; const HeavyChart = dynamic(() => import('../components/HeavyChart'), { ssr: true, // Allow SSR to avoid empty space }); export default function Page() { return (

Dashboard

Loading chart...

}>

); } // With proper CSS for placeholder .chart-placeholder { height: 400px; background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: loading 1.5s infinite; border-radius: 8px; } @keyframes loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } ``` 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 .

What is the "flash of unstyled/unloaded content" problem in CSR, and how do you prevent it?

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

Scenario Questions

Follow-up Questions