Streaming SSR & Suspense
Streaming SSR sends HTML to the browser in chunks as components resolve, instead of waiting for the entire page to render. Suspense boundaries define where to show fallback UI while parts of the tree are still loading.
Streaming SSR is a newspaper printing press — headlines (shell) print first and hit the streets while the detailed articles (data-heavy sections) are still being typeset. Readers start reading immediately.
With renderToPipeableStream (Node) or renderToReadableStream (Edge), React streams HTML progressively. The browser can start rendering the shell (header, nav, layout) immediately while data-dependent sections load. When a suspended component resolves, React injects the HTML inline with a <script> that swaps it in place. This dramatically improves Time to First Byte (TTFB) and Largest Contentful Paint (LCP) compared to traditional SSR that blocks on the slowest data fetch.
Streaming SSR works with selective hydration — React prioritizes hydrating components that the user is interacting with. If the user clicks a button that's still being hydrated, React bumps its priority. The <Suspense> boundary serves dual purpose: SSR fallback (what to show while streaming) and client-side transition fallback. Nested Suspense boundaries create a 'loading waterfall' by design — outer shells appear first, inner content fills in. Error boundaries combined with Suspense handle both loading and error states. React's streaming format interleaves HTML chunks with inline scripts that perform DOM surgery to replace fallbacks.
Streaming SSR sends HTML progressively as components resolve, improving TTFB and LCP. Suspense boundaries define fallback UI for loading sections. The browser renders the shell immediately while data-heavy sections stream in. React also prioritizes hydration for components the user interacts with — selective hydration. I use nested Suspense boundaries to create progressive loading experiences.
Assuming Suspense boundaries only work client-side. In streaming SSR, Suspense controls what HTML is sent first (the shell) and what streams in later. It's a server and client concept.