Streaming in React 18: Rendering Without Waiting

Traditionally, server-side rendering (SSR) in web applications functioned in a binary fashion. The server would either wait for all data to be resolved before sending the HTML or it would send a static shell and hydrate everything later with JavaScript. Both approaches had their shortcomings.

So, why was streaming introduced?

Streaming came as a solution to a critical user experience issue: large, data-driven applications were often slow to load due to SSR's monolithic nature or fast but hollow because of client-side rendering (CSR) skeletons. Streaming, therefore, was born out of a necessity to bridge this gap, providing something fast and useful without waiting for everything.

The initial discussions about asynchronous rendering by the React team sowed the seeds of streaming. As applications became more data-rich and dynamic, a more granular rendering control took center stage. With its concurrent rendering engine, React 18 breathed life into streaming — a model where HTML can start flowing to the browser while rendering continues on the server.

Frameworks like Next.js and Remix have incorporated this model, redefining the creation and delivery of fast, interactive, progressive web applications.

Understanding Streaming in React

In the context of React, streaming signifies a shift from the traditional method of building an entire HTML page and sending it all at once. Instead, the server starts sending fragments of the HTML as soon as they're rendered — this often happens within milliseconds.

React facilitates this streaming process through the renderToPipeableStream() function for Node.js environments and renderToReadableStream() function for Edge servers. These methods allow the response stream to start flowing while the slower parts of the UI, such as data-fetching components, continue rendering in parallel.

Suspense: The Streaming Traffic Controller

React’s <Suspense> component acts as the orchestrator for streaming.

You can encapsulate any segment of your component tree with <Suspense fallback={<Loading />}> and React will render the fallback until the data is ready, after which it will stream the actual content.

<Suspense fallback={<LoadingPosts />}>
  <PostsList />
</Suspense>

In this code snippet, React will perform the following steps:

1. Immediately render the <LoadingPosts /> component.
2. Stream this loading component to the browser.
3. Continue rendering <PostsList /> component in parallel.
4. Substitute the fallback component with the post list when it's ready.

This approach promotes incremental hydration and reduces layout shifts, enhancing the user experience.

Practical Applications of Streaming

Next.js App Router

Next.js has out-of-the-box support for React streaming via its app/ directory. It uses renderToReadableStream for Edge servers and renderToPipeableStream for Node.js servers to progressively stream page layouts, templates, and components.

This process enables:

• Instant rendering of page shells.
• Concurrent data fetching and HTML streaming.
• Reduction in time-to-first-byte (TTFB) for larger pages.

Remix

Remix takes full advantage of streaming. It handles data loading in parallel for all routes and loaders, streaming content as soon as it's available. This results in more resilient and responsive user interfaces, especially for nested layouts and complex pages.

The Impact of Streaming on Real-World Applications

The benefits of streaming include:

• Faster First Contentful Paint (FCP)
• Improved Largest Contentful Paint (LCP)
• Enhanced user experience on slow networks
• Reduced layout shifts and fewer "blank screens"

Streaming allows developers to strike a balance between immediate feedback and asynchronous loading. This lets users see meaningful progress without stalling the entire rendering process.

Key Technical Considerations for Implementing Streaming

• The server host (Node or Edge) must support streaming.
• The server needs to send the correct Content-Type header (text/html; charset=utf-8).
• Middleware and edge logic can interrupt or delay streams if misconfigured.
• Suspense boundaries must be strategically placed as too many can create visual noise.

Error handling in streaming also differs from traditional rendering. Streamed content might already be flushed before an error occurs. Therefore, it's crucial to use error boundaries and fallback UIs thoughtfully.

Conclusion: The Role of Streaming in Modern Web Development

Streaming represents a significant innovation in frontend rendering since the advent of SSR. It lets developers start rendering immediately and progressively show users what matters most — without blocking the rest of the render.

In conjunction with Suspense, streaming underpins a new kind of application architecture: one that’s responsive by default, even under challenging conditions such as slow networks, heavy data, or global latency.

It’s not just about rendering faster.

It’s about rendering smarter.