Server Components vs Client Components

Server Components (Default)

• Run only on the server
• Can fetch data directly (DB, APIs)
• Zero JS sent to client for that component
• Cannot use hooks, event handlers, or browser APIs

Client Components

Add "use client" at the top:

"use client";

import { useState } from "react";

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

Composition Pattern

// page.tsx — Server Component
import { Counter } from "./Counter";

export default async function Page() {
  const data = await fetchData();
  return (
    <div>
      <h1>{data.title}</h1>
      <Counter />
    </div>
  );
}

Interview Questions

Q: Why not make everything a Client Component?

You lose zero-JS benefits, increase bundle size, and can't access server resources directly.

Q: Can a Server Component import a Client Component?

Yes. But Client Components cannot import Server Components (except as children/props).

Q: Where should data fetching happen?

Prefer Server Components — closer to data source, no client waterfalls, secrets stay on server.