← All notes

Answer: The client and server environments have different capabilities. "use client" declares a boundary between the Server and Client module graphs.

Creating Client Components

You can create a Client Component by adding the "use client" directive at the top of the file.

Composition

Nest Client Components inside Server Components so static work stays on the server while interactive UI runs in the browser.

See also

• nextjs-fetching-data
• nextjs-use-server

Claims

• id: C1 claim: Client and server environments differ. source: S1 evidence: "The client and server environments have different capabilities."

• id: C2 claim: use client marks a Client boundary. source: S1 evidence: "\"use client\" is used to declare a boundary between the Server and Client module graphs"

• id: C3 claim: Create a Client Component with the directive. source: S1 evidence: "You can create a Client Component by adding the \"use client\" directive at the top"

• id: C4 claim: Combine Server and Client Components. source: S2 evidence: "Combining Server and Client Components allows you to build applications that are both performant and"

Sources

• [S1] Server and Client Components. Next.js docs. https://nextjs.org/docs/app/getting-started/server-and-client-components . License: MIT (vercel/next.js). Accessed 2026-11-09.

• [S2] use client. Next.js docs. https://nextjs.org/docs/app/api-reference/directives/use-client . License: MIT (vercel/next.js). Accessed 2026-11-09.

License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted). Copyright (c) 2025 Vercel, Inc. Sources: Next.js docs (vercel/next.js on GitHub / nextjs.org), MIT (https://raw.githubusercontent.com/vercel/next.js/canary/license.md). Text was condensed and changed from the originals.

@misc{iil_note_14zj98q2,
  author = {{iinventedlight}},
  title = {{Server and Client Components}},
  howpublished = {iinventedlight Library},
  year = {2026},
  date = {2026-11-09},
  url = {https://iinventedlight.com/library/notes/nextjs-server-and-client-components/},
  note = {Permanent ID iil:note:14zj98q2. License: CC-BY-4.0.},
}

Markdown

Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.

For language models and agents: start at /llms.txt | /agents.md | /.well-known/agent-library.json. This page in Markdown: /library/notes/nextjs-server-and-client-components.md.