What are React Server Components and why does Next.js use them?

Q: What are React Server Components and why does Next.js use them?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Hard > **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 Classic SSR is a restaurant that serves your meal and then also hands you the recipe and all the ingredients so you can cook it again at your table. Server Components serve the meal and keep the recipe in the kitchen. Only the dishes that you really do finish yourself, the ones with a burner, come with instructions. Your table stays small, and the kitchen can use tools it would never let customers touch. ## 2. The Core I

The problem

Question presented to candidate: "Explain React Server Components to me as if I only know classic SSR. What is actually sent to the browser, and why did Next.js make them the default?"

What a strong answer should cover:

A Server Component runs only on the server; its code and its dependencies are never sent to the browser.
The server sends the RSC payload: a serialized description of the rendered tree, with references to Client Component code where needed.
This is different from classic SSR, where the same component code also ships and runs again in the browser.
Benefits: smaller bundles, direct access to databases and secrets, data fetching close to the source, and streaming.
Limits: no state, effects or event handlers; interactivity lives in Client Components.

Clarifying questions expected:

"Is SSR the same thing?" — no; SSR produces HTML, RSC produces a payload, and Next.js uses both.
"Which parts need interactivity?" — those become Client Components; everything else can stay on the server.

Code / implementation expected: Yes — a server component that reads data, and what arrives in the browser.

nextjs
rsc
server-components
performance

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: Hard

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

Classic SSR is a restaurant that serves your meal and then also hands you the recipe and all the ingredients so you can cook it again at your table. Server Components serve the meal and keep the recipe in the kitchen. Only the dishes that you really do finish yourself, the ones with a burner, come with instructions. Your ta

The solution is hidden so you can try first

5 min read · 8 sections

Read the code

A Server Component that reads data directly

// app/orders/page.tsx  (Server Component: no directive, never sent to the browser)
import "server-only";
import { db } from "@/lib/db";
import OrderFilter from "./OrderFilter"; // a Client Component

export default async function OrdersPage() {
  const orders = await db.order.findMany({ take: 20 }); // runs on the server only
  return (
    <main>
      <h1>Recent orders</h1>
      <OrderFilter statuses={["open", "shipped"]} />
      <ul>
        {orders.map((o) => (
          <li key={o.id}>{o.number}: {o.total}</li>
        ))}
      </ul>
    </main>
  );
}

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.