React 18 Streaming SSR and Selective Hydration

1. The Traditional SSR Bottlenecks

Prior to React 18, traditional Server-Side Rendering operated on an "All-or-Nothing" waterfall:

1. 1
   All-or-Nothing Server Render: The server had to render the entire page to HTML before sending a single byte to the browser. If one slow component (like a discussion feed) took 2 seconds to fetch, the user stared at a blank screen for 2 seconds!
2. 2
   All-or-Nothing Hydration: The client had to download JavaScript for the entire page before hydrating anything.
3. 3
   All-or-Nothing Interaction: The user could not click any button on the page until every single component finished hydrating!

2. React 18 Streaming SSR with <Suspense>

React 18 fundamentally solved this problem by introducing Streaming SSR with Selective Hydration via native HTTP chunked transfer encoding (renderToPipeableStream on Node.js).

Instead of waiting for slow components:

1. 1
   The server renders the fast parts of your application (navbar, article body) and streams the initial HTML to the browser immediately.
2. 2
   Slow components wrapped in <Suspense> output fallback HTML skeletons on the server.
3. 3
   Once the slow component's data finishes fetching on the server, React streams in the HTML for that specific component through the same HTTP connection, along with a tiny inline script that automatically swaps it into place!

3. Selective Hydration: Prioritizing User Interaction

In React 18, components wrapped in <Suspense> do not block hydration for the rest of the page.

Even more powerfully, React 18 implements User-Driven Selective Hydration:

• Imagine Component A (Sidebar) and Component B (Comments) are waiting to hydrate.
• If the user suddenly clicks on a button inside Component B:
• React pauses hydration of Component A, jumps ahead to prioritize hydrating Component B, and immediately executes the user's click event!

4. Architectural Summary

React 18's Streaming SSR turns HTML generation and hydration into a concurrent, progressive pipeline:

• Don't wait for all data to send HTML.
• Don't wait for all code to hydrate.
• Don't wait for all components to become interactive.