Topic

Choose Server and Client Components

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.

Open live example →

After this you can

Recognize browser-only code
Place a client boundary low in a component tree
Explain why Client Components cannot import server-only modules

Start on the server

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.

Keep the interactive leaf client-side

// 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.

Mistake: making the whole page client-side

// Wrong — all imports below become client-bundle candidates
'use client';
export default function TicketPage() { return <TicketList />; }

// Right — keep the page server; isolate the interactive child

A high boundary increases JavaScript and blocks server-only imports.

Respect the import boundary

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

Server and Client Components playground

Move use client between a page and button, then identify what ships to the browser.

Component type

Can fetch on server; cannot use useState/onClick.

Keep in mind

Default to Server Components.
Put use client on the smallest interactive leaf.
Treat a Client Component’s imports as browser-visible code.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. Default for App Router components?

Concept

Client Components by default unless marked 'use server'Server Components only when the file is asyncServer Components by default unless marked 'use client'Static Components that become server or client at build time

2. When add 'use client'?

Syntax

When you need to query a database on the serverWhen you need hooks, browser APIs, or interactive event handlersWhen the component must render before hydration completesWhenever a component imports another component

3. Can Server Components use useState?

Practical

No — use a Client Component child for stateYes, if you import useState from next/navigationYes, but only for state that never triggers a re-renderYes, as long as the component is marked async

4. Why Server Components help?

Logic

Reduce client bundle and keep secrets/data fetching on serverThey let you use hooks without shipping any JavaScriptThey automatically cache every render in the browserThey run event handlers on the server to avoid client JS

5. Passing server data to client children?

Concept

Pass a callback so the client can request the data laterStore the data on globalThis for the client to readPass serializable props into Client ComponentsWrap the data in React Context from the Server Component

6. Where do event handlers live?

Practical

Client ComponentsServer Components, since they render the interactive elementsThe root layout, which forwards events to child pagesRoute Handlers, which receive the click as an HTTP request

7. Composition pattern?

Syntax

Server page fetches; client island handles interactivityClient page fetches; server island handles interactivityThe client component fetches then passes data up to a server parentOne Client Component both fetches on the server and handles clicks

8. Can Client Components import Server Components?

Logic

Not directly as children created inside the client module graph the wrong way — pass as children from server parentsYes, importing one into a Client Component keeps it server-renderedYes, as long as the Server Component has no async data fetchingNo, Server and Client Components can never appear in one tree

9. Secrets in Server Components?

Concept

OK, but only if the secret is prefixed with NEXT_PUBLIC_OK to use server-only env; don’t send secrets to the client bundleOK to pass secrets to Client children as long as they aren’t renderedNot OK — Server Components can’t read process.env at all

10. Which statement is true?

Practical

'use client' marks a Client Component boundary for the module"use client" must be added to every file importing a Client Component"use client" turns off server-side rendering for that component"use client" opts the component out of hydration entirely

11. What kind of component is this by default?

Conceptintermediate

// app/page.tsx (no directive)
export default function Page() { return <h1>Hi</h1>; }

A Client Component, since it returns JSXA static component excluded from the server bundleA Server ComponentA hybrid component that renders on both by default

12. Why is the "use client" directive needed here?

Syntaxintermediate

'use client';
export default function Counter() {
  const [n, setN] = useState(0);
}

Because the component returns JSX that must hydrateBecause default exports must be Client ComponentsBecause useState only works when imported on the clientuseState and interactivity require a Client Component

13. Why does this Server Component fail?

Practicaladvanced

// Server Component
export default function Page() {
  const [open, setOpen] = useState(false);
}

useState must be imported from react, which isn’t installedServer Components must return a Promise to use hooksThe component needs "use server" to enable useStateServer Components can’t use useState; move interactivity to a Client Component

14. What is risky about passing onClick here?

Logicadvanced

// Server Component passing to a client child
<Chart data={rows} onClick={handleClick} />

onClick must be renamed to onClickCapture across the boundaryFunctions aren’t serializable across the server/client boundaryThe rows array is too large to serialize as a propEvent handlers must be passed through React Context, not props

15. Why is fetching directly here acceptable?

Conceptintermediate

export default async function Page() {
  const data = await db.tickets.findMany();
  return <List items={data} />;
}

Because the db query runs in the browser after hydrationServer Components can await data on the server and pass plain props downBecause "use client" lets the page await the databaseBecause the fetch is cached, so it never touches the server

Checking your session…