Question 1

What does the 'use client' directive mean?

Accepted Answer

It marks a module and its transitive imports as part of the client bundle boundary. The file becomes a Client Component entry. Children imported into it are also client-side unless they are server-imported separately above the boundary. It does not mean 'only runs on client' — Client Components still SSR/hydrate.

Question 2

Do Client Components still render on the server?

Accepted Answer

Yes — they SSR for HTML, then hydrate on the client. Initial HTML can include client component output. Hydration attaches listeners. Avoid browser-only APIs during render; use effects or dynamic import with ssr: false when necessary.

Question 3

When should a component be a Client Component?

Accepted Answer

When it needs hooks, browser APIs, event handlers, or client-only libraries. Forms with controlled inputs, charts with window size, and auth UI with local state are common. Prefer small islands. If only a button is interactive, extract that button as client.

Question 4

How do you pass data from a Server Component to a Client Component?

Accepted Answer

Pass serializable props (JSON-like). No functions, classes, or non-serializable values. Dates become strings unless handled carefully. Don't pass DB handles. For callbacks, define them inside the Client Component or use server actions as form actions.

Question 5

What hydration mismatch issues are common in Client Components?

Accepted Answer

Rendering different content on server vs client (Date.now, random, locale, window checks). Use effects for client-only values, suppress sparingly, or render placeholders until mounted. Ensure deterministic SSR output.

Question 6

How does dynamic import with next/dynamic help Client Components?

Accepted Answer

Code-split heavy client UI and optionally disable SSR for browser-only widgets. Useful for maps/editors. Trade-offs: loading states and SEO for non-SSR content. Prefer RSC + small client islands before blanket dynamic imports.

Client Components Next.js Interview Questions

Other Next.js interview topics