Client components are traditional React components that run in the browser to provide interactivity (state, effects, event listeners).
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"use client" // This directive is required
2
3import { useState } from 'react'
4
5export default function Counter() {
6 const [count, setCount] = useState(0)
7 return <button onClick={() => setCount(count + 1)}>{count}</button>
8}Mental Model
These are the 'active' parts of your app. Anything the user clicks, types into, or expects to change instantly is a Client Component.
Why This Exists
Because the browser is the only place where user interaction happens. You need them for 'useState', 'useEffect', and browser APIs.
Critical Note
"Client Components only run on the browser. False! They are still pre-rendered into static HTML on the server for the initial page load (SEO friendly), then they 'hydrate' in the browser."