React Server Components (RSC) are special components that execute exclusively on the server and never travel to the user's browser.
Interactive Simulation Engine
RSC Execution Model
Server vs. Client Architecture
System Idle
Server Environment
- Secure server-side execution
- No JS sent to browser
- Direct DB/API access
RSC Payload0kb JS
Client Environment
- Interactive elements
- State (useState)
- Event Listeners
Hydration Bundle+24kb JS
Hover to see how responsibilities are split between Server and Client.
Executable Code Workbench
page.tsx
Live Code Editor1// This component runs ONLY on the server
2import { db } from './db'
3
4export default async function UserProfile() {
5 const user = await db.user.findFirst()
6 // ❌ useState, useEffect, etc. are NOT allowed here!
7 return <div>Welcome, {user.name}</div>
8}Mental Model
Direct execution. Instead of sending code to the browser to be executed, the server handles the logic and data fetching, sending only the resulting UI structure.
Why This Exists
To significantly reduce the amount of JavaScript the user has to download, resulting in near-instant page loads and superior performance on low-power devices.
Critical Note
"Server Components are just SSR. No! SSR sends HTML; RSC sends a serialized format that allows React to preserve client state without losing the user's focus or scroll position."