Client hydration is not blocking above-the-fold content

Setting ssr: false on above-the-fold components — the header, hero, and navigation — means the server sends empty HTML for those regions, and users see a blank viewport until JavaScript hydrates. This damages First Contentful Paint (FCP) and the perceived speed of the page, even when the full page eventually loads quickly. Browser pre-rendering and crawler indexing also fail for these regions: search engine snapshots taken before hydration miss the content entirely. ISO 25010 performance-efficiency.time-behaviour defines time-behaviour as the time from user action to visible response — a blank viewport is a failure of that response.

Remove ssr: false from above-the-fold components. Server-render the static structure of the header and hero, then hydrate interactive elements after paint. Reserve ssr: false for components that genuinely cannot run on the server (browser-only APIs, WebGL, certain chart libraries).

// Before — header blank until JS hydrates
const Header = dynamic(() => import('./Header'), { ssr: false })

// After — server renders static header structure immediately
import Header from './Header' // static import, SSR-compatible
// Interactive elements inside Header hydrate after paint

// Pattern: server-render shell, hydrate interactive parts lazily
// app/layout.tsx
export default function Layout({ children }) {
  return (
    <>
      <Header /> {/* server-rendered static markup */}
      <main>{children}</main>
      <DynamicChatWidget /> {/* ssr: false acceptable — below fold, not critical */}
    </>
  )
}

const DynamicChatWidget = dynamic(() => import('./ChatWidget'), {
  ssr: false,
  loading: () => null
})