RSC

Fetched via RSC Logic

Generated: Calculating...

RSC Architecture & Waterfalls

React Server Components (RSC) are now Dynamic by Default in Next.js 16. While they eliminate client-side waterfalls, they execute on the server for every request unless explicitly optimized with the 'use cache' directive.

Environment

Vercel Serverless

Verification Lab

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

Strategy

Modern Standard: Server-First rendering. In the latest Next.js versions, we shift from 'guessing' cache-ability to an explicit 'Opt-In' performance model.

Hydration

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

Response Headers Lab

Response Headers

Cold start. No cache exists yet.

200 OK

Cache-Control:public, max-age=0, must-revalidate

X-Vercel-Cache:MISS

Infrastructure Layer

Content-Type:text/x-component

X-Nextjs-Prerender:1

Infrastructure Layer

Architectural Insights

Hover over headers to reveal
Infrastructure Lifecycle Data.

Time-Travel Simulator

Use the timeline buttons at the top to simulate how headers evolve over time in a production environment.

Standard:

Unified Explicit Caching (v16)

Infrastructure Verified

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. Since we used "use cache", the result is stored on the server for ultra-fast subsequent loads.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 - 2026)

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.

2026: Next.js 16+

The Explicit Cache Era

Introduction of dynamicIO and "use cache". The platform moves to Dynamic by Default, giving developers surgical control over component-level caching.

Technical Documentation

Read the full architecture breakdown in ABOUT.md

Next Topic

Server-Side Rendering

Fetch data on every request. High performance for personalized content.