#Understanding the Server/Client Boundary¶

The single biggest mental shift in Next.js (since v13, refined in v16) is that components are server-rendered by default. You opt into client rendering only where you need it.

The Three Kinds of Components¶

Server Component — What You Can Do¶

• async directly: export default async function Page() { … }
• Access the database, the filesystem, secrets in env
• Fetch with the global fetch() (deduped & cacheable)
• Import heavyweight server libraries — they never reach the client bundle

What you cannot do:

• useState, useEffect, useReducer, useRef — no client hooks
• Browser APIs (window, document, localStorage)
• Event handlers like onClick={() => …}

Client Component — What You Can Do¶

• All React hooks
• Event handlers
• Browser APIs
• State

What you cannot do:

• Be async (use Suspense + a data hook instead)
• Import server-only modules (Next.js will error)
• Read env vars not prefixed with NEXT_PUBLIC_

A Picture¶

How the Boundary Propagates¶

Once you mark a component "use client", everything it imports becomes part of the client bundle, transitively. So push the directive as deep as possible.

1// ❌ Marks the whole product card client-side just for a button
2"use client";
3export default function ProductCard({ product }) {
4  return (
5    <article>
6      <Image src={product.cover} alt={product.title} width={400} height={300} />
7      <h3>{product.title}</h3>
8      <p>{product.summary}</p>
9      <button onClick={() => addToCart(product.id)}>Add to cart</button>
10    </article>
11  );
12}

1// ✅ Only the button is interactive
2// ProductCard.tsx — server
3export default function ProductCard({ product }) {
4  return (
5    <article>
6      <Image src={product.cover} alt={product.title} width={400} height={300} />
7      <h3>{product.title}</h3>
8      <p>{product.summary}</p>
9      <AddToCartButton id={product.id} />
10    </article>
11  );
12}
13
14// AddToCartButton.tsx — client
15"use client";
16export function AddToCartButton({ id }: { id: string }) {
17  return <button onClick={() => addToCart(id)}>Add to cart</button>;
18}

A Useful Mental Model¶

Server Components handle rendering data. Client Components handle rendering interactions.

Most of your tree is Server Components reading data. The interactive leaves are small Client Components: forms, modals, buttons with state, sliders, theme toggles.

Common Errors¶