The 'use client' directive is a convention to declare a boundary between a Server and Client Component module.
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 must be at the very top
2
3import { useState } from 'react'
4
5export function Interactive() {
6 // useState is only allowed here!
7}Mental Model
It's a flag at the top of a file that says: 'Everything in this file needs to be sent to the browser because it uses interactive features.'
Why This Exists
In the App Router, everything is a Server Component by default. You need a way to opt-in to the client when you need interactivity.
Critical Note
"Adding 'use client' means the whole page is client-rendered. No, only that component and its children become client-side."