What is the difference between Server Components and Client Components in Next.js?

Q: What is the difference between Server Components and Client Components in Next.js?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First A Server Component is a chef who prepares the dish in the kitchen and sends out the finished plate. A Client Component is a plate that comes with a burner, so the guest can keep it warm or flambé it at the table. Most dishes need no burner; you add one only where the guest must interact with the food. ## 2. The Core Idea 📌 **Interview term: Server Component** — a React component that renders only on the server; its c

The problem

Question presented to candidate: "In the App Router, what is the difference between a Server Component and a Client Component, how do you decide which to use, and how do they work together?"

What a strong answer should cover:

Server Components are the default in app/: they run only on the server, can be async, can read databases and secrets, and send no JavaScript to the browser.
Client Components start at a 'use client' file: they are server-rendered to HTML and then hydrated, so they can use state, effects, event handlers and browser APIs.
A Client Component cannot import a Server Component, but can receive one as children or props.
Props from server to client must be serializable (functions and class instances are rejected).
Guideline: keep data and static UI on the server, push 'use client' down to small interactive leaves.

Clarifying questions expected:

"Which parts need interactivity or browser APIs?" — only those need to be Client Components.
"Does anything touch secrets or the database?" — keep it on the server with server-only.

Code / implementation expected: Yes — a server page composing a client leaf.

nextjs
rsc
server-components
client-components

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

A Server Component is a chef who prepares the dish in the kitchen and sends out the finished plate. A Client Component is a plate that comes with a burner, so the guest can keep it warm or flambé it at the table. Most dishes need no burner; you add one only where the guest must interact with the food.

2. The Core Idea

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

A server page composing a small client leaf

// app/products/page.tsx (Server Component)
import "server-only";
import { db } from "@/lib/db";
import AddToCart from "./AddToCart";

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

// app/products/AddToCart.tsx (Client Component)
"use client";
import { useState } from "react";
import { addToCart } from "./actions"; // a Server Action
export default function AddToCart({ productId }: { productId: string }) {
  const [added, setAdded] = useState(false);
  return <button onClick={async () => { await addToCart(productId); setAdded(true); }}>{added ? "Added" : "Add"}</button>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.