What is React Suspense and streaming in Next.js?

Streaming with Suspense allows Next.js to progressively send HTML to the browser as it's rendered, rather than waiting for the entire page to finish before sending anything. Traditional SSR problem: the entire page must be fetched and rendered before ANY HTML is sent. One slow component (user profile fetch) blocks the entire page. Streaming solution: HTML is sent in chunks. The "shell" (layout, non-dynamic content) is sent immediately. Suspended components send their content when ready — users see and can interact with parts of the page before others load. Implementation: wrap async components in Suspense with a fallback: export default function Dashboard() { return ( <main> <Suspense fallback={<HeaderSkeleton />}> <UserHeader /> {/* slow API call */} </Suspense> <Suspense fallback={<MetricsSkeleton />}> <DashboardMetrics /> {/* database query */} </Suspense> </main> ); }. UserHeader and DashboardMetrics can stream in independently — whichever finishes first appears first. loading.tsx automates this — wraps the entire page.tsx in a Suspense boundary. Benefits: (1) First Contentful Paint is dramatically faster; (2) Time to Interactive improved; (3) Slow components don't block fast ones; (4) Better perceived performance. Streaming HTTP: Next.js uses chunked transfer encoding to stream HTML. The HTTP connection stays open, sending chunks as they're ready. TTFB (Time to First Byte): remains fast because the shell HTML is sent immediately.