Frontend

React Server Components (RSC): Architecture, Mental Model, and Streaming SSR

Master React Server Components. Understand the shift from traditional SSR to RSC, zero-bundle-size components, and HTTP streaming with Suspense.

Published on June 1, 2026Updated June 1, 2026

React Server Components (RSC)—introduced natively in React 18 and cemented in React 19 and modern meta-frameworks like Next.js App Router, Remix, and Waku—represent the most significant architectural paradigm shift in the React ecosystem since Hooks in 2018.

Historically, React was a purely client-side rendering library. Every component—regardless of whether it contained interactive buttons or static marketing text—was compiled, bundled, shipped over the wire, and executed in the user’s browser.

React Server Components fundamentally divide the component tree into two complementary environments: Server and Client.

The RSC Mental Model: Two Environments, One Component Tree

                                 SERVER ENVIRONMENT
                 ┌─────────────────────────────────────────────────┐
                 │ RootLayout (Server Component)                   │
                 │   ├── Header (Server Component)                 │
                 │   │     └── SearchBar (Client Component 'use client')
                 │   ├── ProductCatalog (Server Component - Async DB)│
                 │   │     └── ProductCard (Server Component)      │
                 │   │           └── AddToCartButton ('use client') │
                 │   └── Footer (Server Component)                 │
                 └────────────────────────┬────────────────────────┘
                                          │
                   (Streams RSC Payload + HTML over wire)
                                          │
                                          ▼
                                 CLIENT ENVIRONMENT
                 ┌─────────────────────────────────────────────────┐
                 │ Browser receives lightweight HTML + RSC stream  │
                 │ Only hydrates 'use client' interactive islands! │
                 │ Zero JS bundle size for Server Components! ✅   │
                 └─────────────────────────────────────────────────┘

3 Game-Changing Benefits of RSC

1. Zero Bundle Size Overhead for Server Dependencies

In a traditional React SPA, if an article component uses heavy libraries like date-fns (30 KB) or marked markdown parser (50 KB), those libraries are bundled into the client JavaScript payload.

In RSC, Server Components execute exclusively on the server:

// app/blog/[slug]/page.tsx (Server Component)
import { marked } from 'marked'; // Stays 100% on the server! 0 KB sent to client!
import sanitizeHtml from 'sanitize-html';
import db from '@/lib/db';

export default async function BlogPostPage({ params }: { params: { slug: string } }) {
  const post = await db.post.findUnique({ where: { slug: params.slug } });
  const html = sanitizeHtml(marked.parse(post.content));

  return (
    <article className="prose">
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: html }} />
    </article>
  );
}

2. Direct Backend & Database Access

Server Components can be asynchronous (async/await) and query PostgreSQL, Redis, or internal microservices directly without exposing intermediate REST/GraphQL API endpoints.

3. Progressive HTML Streaming with <Suspense>

Instead of waiting for all database queries to complete before sending any HTML to the browser, RSC streams fast components (Navbar, Sidebar, Skeleton) immediately, streaming slow data chunks into the DOM as they resolve.

Next Steps

• Continue to the next guide: Client vs. Server Components: The ‘use client’ Boundary.