Server vs Client Components

In the App Router, every component is a Server Component by default. You opt into a Client Component with the "use client" directive. Understanding this boundary is the most important concept in modern Next.js.

Server Components

Render only on the server. They can:

• Directly access databases, the filesystem, and secrets (API keys).
• Fetch data with async/await.
• Send zero JavaScript to the browser → smaller bundles.

They cannot use state, effects, event handlers, or browser APIs.

// Server Component (default) — no directive needed
export default async function ProductList() {
  const products = await db.product.findMany();
  return <ul>{products.map((p) => <li key={p.id}>{p.name}</li>)}</ul>;
}

Client Components

Add "use client" at the top of the file. They run in the browser and can use interactivity:

"use client";
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

How to choose

Composition pattern

Keep most of your tree as Server Components and push "use client" to the leaves. A Server Component can import and render a Client Component (and pass it serializable props), but a Client Component cannot import a Server Component directly — instead, pass it as children.

// Server Component
import InteractiveButton from "./InteractiveButton"; // client

export default async function Page() {
  const data = await getData();
  return (
    <section>
      <h1>{data.title}</h1>        {/* server-rendered */}
      <InteractiveButton />         {/* client island */}
    </section>
  );
}