You create a Client Component by adding the 'use client' directive at the top of the file, above the imports. Components in the App Router are Server Components by default, so you opt in only where you need interactivity.
'use client';
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
The directive declares a boundary between server and client code. Every module the file imports, and every component it renders directly, joins the client bundle, so you do not repeat the directive in child files. Client Components are still prerendered to HTML on the server, then hydrated in the browser to attach event handlers.
Use one when you need state and event handlers, effects, or browser-only APIs such as localStorage. Keep the directive on small leaf components, such as a button, rather than a whole page, so less JavaScript reaches the browser.
This answer doesn't lend itself to a diagram - it reads best . No credits were charged.
Why there's no diagram: “”
The interactive diagram is below the answer - jump to diagram ↓ · Below it, the related concept . Jump to it ↓
The diagram below the answer is the concept . Jump to it ↓