What is the difference between Server Components and Client Components?

Summary

Server Components render only on the server: they can be async, access databases and secrets directly, and send no JavaScript for themselves to the browser. Client Components (marked with 'use client') render on the server for the initial HTML and then hydrate in the browser, so they can use state, effects, event handlers and browser APIs.

Longer Answer

In the App Router, everything is a Server Component by default. 'use client' marks a boundary: that module and everything it imports become part of the client bundle. Server Components can render Client Components and pass them serializable props (or other Server Components as children). Client Components can't import Server Components directly, but can receive them as props.

Code Example

// app/products/page.tsx (Server Component)
import { AddToCart } from "./add-to-cart";

export default async function ProductsPage() {
  const products = await db.product.findMany(); // runs on the server only
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}>
          {p.name} <AddToCart productId={p.id} />
        </li>
      ))}
    </ul>
  );
}

// app/products/add-to-cart.tsx
"use client";
import { useState } from "react";

export function AddToCart({ productId }: { productId: string }) {
  const [added, setAdded] = useState(false);
  return <button onClick={() => setAdded(true)}>{added ? "Added" : "Add to cart"}</button>;
}

Key Points

• Server by default in app/
• 'use client' marks a client boundary
• Server: async, direct data access, zero JS
• Client: hooks, events, browser APIs
• Props crossing the boundary must be serializable

What interviewers look for

Knowing where to place the client boundary: as low (leafy) as possible to minimize client JS.

Common mistakes

• Putting 'use client' at the top of a layout and making the whole tree client-side
• Passing functions or class instances as props from server to client