React Server Components (RSC) Architecture0%
Next.js App Router and Server-First Paradigms

React Server Components (RSC) Architecture

Beginner12 min read•Updated: Jul 11, 2026
Study MaterialsCheatsheet

React Server Components (RSC) Architecture

1. The Paradigm Shift: React on the Server

For over a decade, every React component was a Client Component: it executed in the browser, was bundled into client JavaScript, and could hold local state and event handlers.

React Server Components (RSC) represent the most significant architectural evolution in React history.

In RSC architecture:

Components execute EXCLUSIVELY ON THE SERVER during the build or request time. Their code NEVER downloads to the user's browser, resulting in ZERO client bundle size!
Output
Client Component (.jsx / 'use client'):
- Downloaded to browser in JS bundle
- Executed on client
- Can use useState, useEffect, onClick
- Bundle Size: Adds to client JS download!
 
React Server Component (.jsx - Default in Next.js App Router):
- Executed ONLY on server
- NEVER downloaded to browser
- Can access database, files, and secrets directly!
- Bundle Size: 0 KB added to client JS!

2. Direct Database & Backend Access

Because Server Components run strictly on the backend, they can query databases, read file systems, and use private API keys directly inside the component function without creating an intermediary REST API endpoint:

JSX
// A React Server Component (Runs ONLY on server!)
import db from '@/lib/database';
 
export default async function StudentRoster() {
// Query database directly! No fetch(), no useEffect(), no loading spinner!
const students = await db.query('SELECT * FROM students ORDER BY enrolled_at DESC');
 
return (
<div className="roster-view">
<h2>Enrolled Students ({students.length})</h2>
<ul>
{students.map((s) => (
<li key={s.id}>{s.name} — {s.course}</li>
))}
</ul>
</div>
);
}

3. The 'use client' Directive

In RSC architecture (as implemented in Next.js App Router), all components are Server Components by default.

If a component needs interactivity:

  • React state (useState, useReducer)
  • Lifecycle effects (useEffect)
  • Browser APIs (window, localStorage, geolocation)
  • Event listeners (onClick, onChange)

You declare the 'use client' directive at the very top of the file:

JSX
'use client'; // Marks this file and its imports as a Client Component boundary!
 
import React, { useState } from 'react';
 
export default function LikeButton({ initialLikes }) {
const [likes, setLikes] = useState(initialLikes);
 
return (
<button onClick={() => setLikes(l => l + 1)}>
★ {likes} Likes
</button>
);
}

4. Composing Server and Client Components

The golden rule of RSC composition:

  • Server Components can import and render Client Components.
  • Client Components CANNOT import Server Components directly!
  • However, a Client Component can accept a Server Component as a children prop passed down from a parent Server Component!
JSX
// Server Component (Parent):
export default async function Page() {
const data = await db.getData();
 
return (
// ClientComponent receives ServerComponent as children!
<ClientModalWrapper>
<ServerRenderedContent data={data} />
</ClientModalWrapper>
);
}
Interactive Quiz

Practice Quiz

Question 1
What is the primary characteristic of a React Server Component (RSC)?
Question 2
What directive marks a component file as an interactive Client Component in the React Server Component architecture?
Question 3
Can a React Server Component use the useState or useEffect hooks?
Question 4
How does a Server Component fetch data from a database?
Question 5
How can an interactive Client Component (like a modal wrapper) contain a Server Component that queries the database?
Next Lesson

Next.js App Router and Server-First Paradigms

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
React 18 Streaming SSR and Selective HydrationNext.js App Router and Server-First Paradigms

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext