The string 'use client' at the top of a file marks that module and its transitive imports as Client Components. It creates a boundary between server-only code and browser bundles.
Syntax rules
- Must be the first statement (comments above are fine)
- Applies to the whole file—you cannot mix server and client in one module
- Every file in the import chain from a client entry must be client-safe
Common mistake
// BAD: Server Component importing server db into client tree
'use client';
import { getUser } from './server-data'; // pulls server code client-side
// GOOD: Server parent fetches; passes serializable props to client child
// ServerPage.tsx → <ClientProfile user={user} />Playground behavior
This site’s runner removes 'use client' before execution so the same source matches real Next.js projects while still running in a browser sandbox. Keep writing the directive to build the habit.
Important interview questions and answers
- Q: Does 'use client' mean “only render on client”?
A: It means the module is bundled for the browser and may hydrate—not that SSR is disabled for the whole route. - Q: Can you pass functions from Server to Client Components?
A: Only through Server Actions or patterns that serialize safely—arbitrary functions are not passed as props.
Self-check
- Where must
'use client'appear in a file? - Why should server database code stay out of client files?
Pitfall: Importing server-only modules (db, secrets) into a client file pulls them toward the browser bundle—keep fetches in server parents.
Interview prep
- What does 'use client' mean?
The file and its imports are Client Components bundled for the browser—it defines a boundary, not “skip SSR entirely.”