Topic
Definition
React Server Components render on the server and do not send their component implementation to the browser; Client Components opt into browser JavaScript for state, effects, and event handlers.
In simpler words
Server is the default. Add use client only around the smallest interactive part.
The boundary controls bundle size, available APIs, and whether code can safely access server-only values.
A Server Component can read server-only configuration, await rendering data, and compose Client Components. Its component code is not shipped as a browser bundle just because it renders JSX.
State hooks, effects, event handlers, and browser APIs such as window require a Client Component. The use client directive marks a module boundary, so its imports become part of the client graph too.
// TicketPage.tsx — Server Component by default
export default function TicketPage() {
return <><TicketSummary /><TicketFilters /></>;
}
// TicketFilters.tsx
'use client';
export function TicketFilters() {
const [open, setOpen] = useState(false);
return <button onClick={() => setOpen(!open)}>Filters</button>;
}Only the filter control needs browser JavaScript.
// Wrong — all imports below become client-bundle candidates
'use client';
export default function TicketPage() { return <TicketList />; }
// Right — keep the page server; isolate the interactive childA high boundary increases JavaScript and blocks server-only imports.
Definition
A Client Component cannot import server-only modules, secrets, database code, or code that depends on server runtime APIs.
In simpler words
Pass serializable data from a Server Component into a Client Component instead.
The directive is not an instruction to render only in the browser; Client Components can still be pre-rendered.
Move a client boundary downward before adding one to a page or layout.
Live playground
Move use client between a page and button, then identify what ships to the browser.
Can fetch on server; cannot use useState/onClick.
Test
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2