Streaming SSR

Streaming SSR

Traditional Server-Side Rendering (SSR) is a synchronous, blocking process.

In traditional SSR, the server must fetch all the data for a page, render all the HTML, and send it down to the client in one giant chunk. If a page has a slow database query (like fetching a complex analytics chart), the user sees a blank white screen until that slow query finishes, even if the rest of the page (like the Navbar and Sidebar) is perfectly ready.

Streaming SSR

Streaming SSR (introduced natively in React 18 with renderToPipeableStream) solves this problem by allowing the server to send the HTML to the browser in chunks as soon as they are ready.

Instead of waiting for the entire page to finish rendering on the server, React can instantly send down the static parts of the layout (like the Header and Footer). The browser paints these immediately.

For the slower, data-heavy parts of the page, React sends down a fallback UI (like a loading spinner) in the initial HTML stream. Once the slow data finally resolves on the server, React streams the completed HTML for that specific component down the same open connection, along with a tiny inline <script> tag that seamlessly replaces the loading spinner with the actual content in the browser.

The Role of Suspense

Streaming SSR is entirely powered by the <Suspense> component.

By wrapping a component in <Suspense>, you are explicitly telling the React server: “Don’t wait for this component to finish. Send the rest of the page now, send this fallback spinner, and send the real HTML later when it’s ready.”

function Dashboard() {
  return (
    <div className="layout">
      {/* This renders and streams to the browser instantly */}
      <Sidebar />
      
      <main>
        {/* The server sends the <Spinner /> instantly. 
            Once UserFeed finishes fetching data on the server, 
            its HTML is streamed down and replaces the spinner. */}
        <Suspense fallback={<Spinner />}>
          <UserFeed />
        </Suspense>
      </main>
    </div>
  );
}

Benefits of Streaming

1. Faster TTFB (Time to First Byte): The server responds almost instantly with the initial layout, making the site feel blazing fast.
2. Progressive Hydration: Because the HTML arrives in chunks, React can start hydrating the parts of the page that have already arrived, rather than waiting for the entire page to finish downloading.
3. SEO Friendly: Search engine crawlers wait for the entire stream to finish before indexing, so they still see the fully rendered page, unlike Client-Side Rendering.

Framework Support

While React provides the low-level renderToPipeableStream API, you rarely use it directly. Modern frameworks like Next.js (App Router) and Remix have Streaming SSR built-in and configured by default whenever you use <Suspense>.

Interview Questions

Q: How does Streaming SSR improve the user experience compared to traditional SSR?
A: Traditional SSR makes the user wait until the entire page is fully rendered on the server before sending anything. Streaming SSR allows the server to send HTML in chunks as they become ready. The user sees the header and layout instantly, while heavier components (wrapped in Suspense boundaries) stream in moments later.