RSC

Fetched via RSC Logic

Generated: Calculating...

RSC Architecture & Waterfalls

React Server Components (RSC) redefine how data travels from your server to the screen. By moving fetching to the server, we eliminate the costly 'Request-Response' cycles that cause slow page loads.

Environment

Vercel Serverless

Verification Lab

Hit F5 (Hard Refresh) to see the server re-render. Internal navigation might use client-cache.

Strategy

Server-First rendering introduced in React 18 (2022). Fixes the 'Waterfall' problem by consolidating data fetching on the server before client execution.

Hydration

Server sends finished HTML. Browser 'hydrates' it for interactivity.

Inspect Network

Open DevTools > Network. Look forCache-Controlheader. For RSC, you will seeno-store / no-cache

RSC Pipeline

Order of operations

Server Execution

The component executes ONLY on the server. Zero JS is sent to the client for this logic.

Direct DB Access

RSCs can query databases or call internal APIs without needing a REST/GraphQL endpoint.

Consolidated Payload

Multiple fetches are combined into a single serialized stream.

Zero-Hydration UI

Static parts are rendered as HTML; only Interactive islands are hydrated.

Implementation Blueprint

app/page.tsx

// Standard Server Component (Default in Next.js 13+)
export default async function Page() {
  // Direct Server-Side logic (No useEffect/useState needed)
  const data = await db.query('SELECT * FROM products');
  
  return (
    <main>
      <h1>Server-Side Data</h1>
      <ProductGrid items={data} />
      
      {/* Client Component Island */}
      <InteractiveFilter /> 
    </main>
  );
}

React Server Components are not just SSR. They allow you to define parts of your UI that stay on the server forever, reducing bundle size and eliminating client-side data fetching waterfalls.

Live RSC Fetch

These products were fetched inside a React Server Component (RSC).

Testing Tip

RSCs fetch on the server. Hard Refresh (F5) to force re-render.Inter-page navigation is cached by the Browser Router for 30s.

beauty

2.56 (99 reviews)

Essence Mascara Lash Princess

The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.

$9.99

beauty

2.86 (34 reviews)

Eyeshadow Palette with Mirror

The Eyeshadow Palette with Mirror offers a versatile range of eyeshadow shades for creating stunning eye looks. With a built-in mirror, it's convenient for on-the-go makeup application.

$19.99

beauty

4.64 (89 reviews)

Powder Canister

The Powder Canister is a finely milled setting powder designed to set makeup and control shine. With a lightweight and translucent formula, it provides a smooth and matte finish.

$14.99

beauty

4.36 (91 reviews)

Red Lipstick

The Red Lipstick is a classic and bold choice for adding a pop of color to your lips. With a creamy and pigmented formula, it provides a vibrant and long-lasting finish.

$12.99

The Code Transformation

See how the transition from Client-Side to Server-Side components simplifies your pipeline and improves developer experience.

Pipeline Code Comparison

dashboard-client.tsx

// ❌ BEFORE: The Waterfall (Client-Side)
export default function Dashboard() {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    // 1st Round-trip: Fetch User
    fetch('/api/user')
      .then(res => res.json())
      .then(data => setUser(data));
  }, []);
  if (!user) return <Loading />;
  // ⚠️ CHILD starts fetching only after PARENT renders
  return <PostList userId={user.id} />;
}

Client Payload

Includes heavy useEffect logic, state management, and fetch overhead.

Execution

Requests travel over the public internet (High Latency).

Visualization of the Waterfall

Conceptualizing the network requests: CSR requires chaining, while RSC allows consolidation.

client Architecture

Total Time: ~4500ms

Root HTML

React Bundle

Fetch Layout

Fetch Profile

Fetch Posts

The 'Fetch-on-Render' pattern causes children to wait for parent fetches. This is the 'Waterfall' problem.

rsc Architecture

Total Time: ~1200ms

Server Render

Parallel Fetch

Stream Body

RSCs fetch data on the server with zero client latency between requests, delivering a consolidated result.

The RSC Evolution

From Client-Heavy to Server-First (2020 - 2025)

2020: The RFC

Conceptual Birth

Facebook introduces RSC to solve the "huge JS bundles" problem. The idea: some components should never hydrate on the client.

2022: Next.js 13

App Router Launch

The first production implementation. Data fetching becomes as simple as await fetch() inside your components.

2024: Next.js 15

Full Maturity

Streaming, Partial Prerendering (PPR), and Server Actions complete the ecosystem, making waterfalls a thing of the past.

Technical Documentation

Read the full architecture breakdown in ABOUT.md

Next Topic

Partial Prerendering

The ultimate hybrid: combine static speed with streaming dynamic content.