TL;DR — By leveraging streaming Suspense, React Server Components can send partial HTML as soon as it’s ready, reducing Time to First Byte and improving perceived load times. Selective hydration then hydrates only the interactive portions of the UI, minimizing JavaScript execution on the client and boosting overall responsiveness.

In the evolution of React, the shift from client‑side rendering to server‑side rendering has been driven by the need for faster initial loads and better SEO. React Server Components (RSC) extend this by allowing components to render entirely on the server, producing HTML that can be streamed to the browser. However, the full potential of RSC is unlocked only when combined with streaming Suspense and selective hydration. This article explores these two techniques, their underlying architecture, and practical patterns you can apply in production.

Understanding React Server Components

How RSC Works

React Server Components are functions that execute on the server and return JSX. Unlike traditional client components, they never ship JavaScript to the client; the server renders them to HTML and sends it directly. The React framework (for example, Next.js) orchestrates this process, ensuring that data fetching and rendering happen before the response is sent. For a deeper dive, see the React Server Components documentation.

// Example of a Server Component in Next.js
async function ProductPage({ id }) {
  const product = await fetchProduct(id);
  return <div>{product.name}</div>;
}

Because the component runs on the server, it can access databases, file systems, or any backend service without exposing secrets to the client.

Benefits of Server Rendering

  • Faster Time to First Byte (TTFB) – The server can start sending HTML as soon as the first chunk is ready.
  • Improved SEO – Search engines receive fully rendered HTML.
  • Reduced JavaScript Bundle – Only interactive parts need client‑side code.
  • Better Performance on Low‑End Devices – Initial paint occurs without executing large JS bundles.

Architecture: Streaming Suspense in Production

What is Streaming?

Streaming is the process of sending HTML in multiple chunks over a single HTTP connection. Instead of waiting for the entire page to render, the server can flush each rendered segment as it becomes available. This reduces perceived load time because the browser can begin parsing and displaying content immediately.

The HTTP Transfer-Encoding: chunked header enables this behavior, and modern Node.js streams automatically leverage it when using frameworks like Next.js.

Suspense Boundaries

Suspense allows React to pause rendering at a component boundary while waiting for async data. When combined with streaming, the server can emit a placeholder (fallback) for that boundary and then replace it with the real content once the promise resolves.

import { Suspense } from 'react';

function ProductList() {
  return (
    <div>
      <Suspense fallback={<div>Loading products…</div>}>
        <AsyncProductList />
      </Suspense>
    </div>
  );
}

In the example above, <AsyncProductList /> is a Server Component that fetches data. React streams the fallback markup first, then streams the resolved markup when the data arrives.

Implementation Example

A typical Next.js App Router page can use Suspense to stream multiple sections:

// app/products/[id]/page.tsx
import { Suspense } from 'react';
import ProductDetail from '@/components/ProductDetail';
import RelatedProducts from '@/components/RelatedProducts';

export default function Page({ params }) {
  const id = params.id;
  return (
    <main>
      <Suspense fallback={<div>Loading product…</div>}>
        <ProductDetail id={id} />
      </Suspense>
      <Suspense fallback={<div>Loading related items…</div>}>
        <RelatedProducts id={id} />
      </Suspense>
    </main>
  );
}

Each <Suspense> boundary creates a separate stream chunk, allowing the browser to render the product detail as soon as it’s ready, while the related items section follows later.

Patterns in Production: Selective Hydration

Hydration Basics

After the server sends HTML, React “hydrates” the markup by attaching event listeners and making it interactive. Traditional hydration requires the entire DOM to be hydrated, which can be expensive for large pages.

Selective hydration is a technique where only the parts of the UI that actually need interactivity are hydrated. This is achieved by marking certain components as client‑only with the "use client" directive in Next.js or by using dynamic imports.

Partial Hydration

Partial hydration allows the server to render a component as static HTML, while the client can later “upgrade” it to a fully interactive component when needed. This is especially useful for components that are rarely interacted with, such as footer links or static descriptions.

// components/StaticFooter.tsx
export default function StaticFooter() {
  return <footer>© 2026 My Company</footer>;
}

// components/InteractiveSearch.tsx
'use client';
import { useState } from 'react';
export default function InteractiveSearch() {
  const [query, setQuery] = useState('');
  return (
    <input
      value={query}
      onChange={(e) => setQuery(e.target.value)}
      placeholder="Search…"
    />
  );
}

In the parent component, you can combine both:

import StaticFooter from '@/components/StaticFooter';
import InteractiveSearch from '@/components/InteractiveSearch';

export default function Layout() {
  return (
    <div>
      <InteractiveSearch />
      <StaticFooter />
    </div>
  );
}

The <StaticFooter /> remains static, while <InteractiveSearch /> is hydrated only when the bundle containing it is loaded.

Practical Example

Consider a dashboard with several cards. Each card may fetch its own data and require user interaction (e.g., filtering). By wrapping each card in its own Suspense boundary and marking only the interactive parts as client components, you can stream each card independently and hydrate only the cards the user actually clicks.

// app/dashboard/page.tsx
import { Suspense } from 'react';
import Card from '@/components/Card';

export default function Dashboard() {
  return (
    <div className="grid">
      <Suspense fallback={<div>Loading sales…</div>}>
        <Card title="Sales" />
      </Suspense>
      <Suspense fallback={<div>Loading traffic…</div>}>
        <Card title="Traffic" />
      </Suspense>
    </div>
  );
}

Each <Card /> can be a Server Component that streams its content, and any client‑side interactivity inside the card can be isolated to a small "use client" component, minimizing the JavaScript that must be downloaded and executed.

Key Takeaways

  • Streaming Suspense reduces Time to First Byte by allowing the server to flush HTML chunks as they become ready.
  • Suspense boundaries create natural points for partial streaming, enabling fallback UIs while async data resolves.
  • Selective hydration ensures only interactive components receive JavaScript, lowering bundle size and improving runtime performance.
  • Combining Server Components with "use client" markers gives fine‑grained control over what is hydrated.
  • Real‑world benefits are most evident on slow networks or when pages contain large amounts of static content alongside interactive widgets.

Further Reading