Demystifying Hydration and Streaming in React 19: Core Concepts for Modern Web Development

As web applications grow more dynamic and complex, delivering seamless user experiences has become a top priority for developers. With the release of React 19, two pivotal concepts — hydration and streaming — have taken center stage in the evolution of modern web development. While these terms may seem technical, understanding their roles is essential for building fast, interactive, and efficient applications.

Hydration bridges the gap between server-rendered HTML and client-side interactivity, while streaming introduces a new way to serve content faster by delivering it incrementally. Together, they form the backbone of React 19’s approach to enhancing performance and user experience.

In this blog post, we’ll explore the principles of hydration and streaming, how they work, and why they matter for your React projects. Whether you’re aiming to improve load times or optimize rendering strategies, this guide will provide you with the foundational knowledge to harness these concepts effectively.

1. Hydration

Hydration is the process where a server-rendered HTML page is enhanced with JavaScript on the client side to make it interactive. In React, this means attaching event listeners and state management to the static HTML sent by the server.

How Hydration Works

1. Server-Side Rendering (SSR): The server generates HTML for the React components and sends it to the browser. This HTML is fully rendered but is not interactive yet (e.g., buttons or forms don’t work).
2. Client-Side JavaScript: The browser downloads the React application’s JavaScript bundle. React parses the HTML, matches it with the corresponding React components, and reattaches their state and event listeners.
3. Result: The page is now interactive, with JavaScript functionality restored.

Key Characteristics

• Requires a Full React Bundle: The browser downloads the React app’s JavaScript even for components that don’t need interactivity.
• Performance Consideration: Hydration can be slow for large pages, as the browser needs to reinitialize React for the entire page.
• Rehydration Failures: If the server-rendered HTML and client-side rendering don’t match, React logs a warning and attempts to recover.

Example

Imagine a React SSR page with a counter button.

Server-Rendered HTML:

<div id="root">
  <button>Clicked 0 times</button>
</div>

Client-Side Hydration:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

1. The server sends the static HTML (<button>Clicked 0 times</button>).
2. After hydration, the Counter component becomes interactive, allowing the button click to update the count.

Challenges with Hydration

• Time to Interactivity (TTI): Hydration delays TTI because the page is only interactive after the JavaScript bundle is loaded and executed.
• Redundant Work: The server has already rendered the HTML, and the client essentially redoes this work to attach interactivity.

2. Streaming

Streaming is a technique where the server sends parts of a web page (or data) to the client incrementally, rather than waiting to render the entire page. This allows the client to start rendering and displaying parts of the page as soon as they arrive.

How Streaming Works

1. Server Preparation: The server processes components or data in chunks.
2. Streaming: These chunks are sent to the browser incrementally over a network connection (e.g., HTTP/2).
3. Client Rendering: The browser renders the received chunks immediately, providing a faster user experience as content appears progressively.

Key Characteristics

• Progressive Rendering: Content appears on the screen as it becomes available, reducing Time to First Paint (TTFP).
• Streaming HTML and Data: For example, in React’s ReactDOMServer, HTML and JSON-like data can be streamed to the client in chunks.
• Better Perceived Performance: Users can interact with visible content while the rest of the page loads.

Example

Let’s say we have a product page with three sections: Product Details, Reviews, and Recommendations.

Without Streaming (Traditional SSR):

• The server renders all sections, waits for data fetching, and sends a complete HTML response.
• Result: Delayed page load as all sections must be ready before display.

With Streaming (React 19):

• The server sends HTML incrementally:

1. Product Details are sent first.
2. Then, Reviews.
3. Finally, Recommendations.

Server Code:

import { renderToPipeableStream } from 'react-dom/server';

function App() {
  return (
    <div>
      <ProductDetails />
      <Reviews />
      <Recommendations />
    </div>
  );
}

const stream = renderToPipeableStream(<App />, {
  onShellReady() {
    stream.pipe(response); // Start streaming to the client
  },
});

Result:

• The client sees the Product Details immediately, even if Reviews and Recommendations are still loading.
• Explore more examples using RSC.

Challenges with Streaming

• Browser Support: Requires modern browser features like streaming responses and Suspense.
• Error Handling: Errors during streaming might require fallback mechanisms for incomplete sections.

Key Differences Between Hydration and Streaming

If you are interested about how the RSC implementation works with just standalone React 19 or with Next.js Framework, check this article out!