What is the difference between React Server Components and Client Components?

Think of ordering food at a restaurant. Some dishes are fully prepared in the kitchen and arrive ready to eat. Others, like a sizzler or a DIY pani puri plate, come with parts you finish at your table.

Server Components are the kitchen-prepared dishes. They run on the server, can talk to the database directly, and the browser receives only the finished result. None of their code is shipped to the browser.

Client Components are the do-it-at-the-table dishes. Their JavaScript is sent to the browser so they can respond to clicks, keep state and use browser APIs.

In the Next.js App Router, components are Server Components by default. You add "use client" at the top of a file when that part needs interactivity.

// app/jobs/page.tsx — a Server Component (the default)
import { db } from "@/lib/db";
import SaveButton from "./SaveButton";

export default async function JobsPage() {
  const jobs = await db.job.findMany(); // runs on the server only
  return (
    <ul>
      {jobs.map((job) => (
        <li key={job.id}>
          {job.title} at {job.company}
          <SaveButton jobId={job.id} />
        </li>
      ))}
    </ul>
  );
}

// app/jobs/SaveButton.tsx — a Client Component
"use client";
import { useState } from "react";

export default function SaveButton({ jobId }: { jobId: string }) {
  const [saved, setSaved] = useState(false);
  return (
    <button onClick={() => setSaved(true)}>{saved ? "Saved" : "Save"}</button>
  );
}

The list, the database query and the database library stay on the server. Only the small SaveButton code goes to the browser.

• Server Components can be async and await data directly. They can use secrets like database credentials safely, because their code never reaches the browser. They cannot use useState, useEffect, event handlers or browser APIs like window.
• Client Components are still rendered to HTML on the server for the first page load, then hydrated in the browser, meaning React attaches event handlers and makes them interactive. "Client" means "also runs in the browser", not "only runs in the browser".
• "use client" marks a boundary. That file and every module it imports become part of the client bundle.
• A Server Component can render a Client Component and pass it props, but those props must be serializable: strings, numbers, plain objects and arrays, not functions or class instances. Server Functions marked with "use server" are the exception, and can be passed so the client can call back to the server.
• A Client Component cannot import a Server Component, but it can receive one as children or another prop from a Server Component parent.

• A blog or product page where most content is static and fetched from a database: Server Components, with less JavaScript sent to the phone.
• A search box, cart button, carousel or form with live validation: Client Components.
• A typical page is a Server Component layout with small interactive Client Components placed inside it.

• Putting "use client" at the top of a high-level layout, which pulls the whole tree into the client bundle. Push the boundary as low as possible.
• Trying to use useState or onClick in a Server Component and getting an error.
• Passing a function from a Server Component to a Client Component as a normal prop.
• Thinking Client Components skip server rendering. They still produce HTML on the server for the first load.
• Importing server-only code, such as database helpers with secrets, into a Client Component.

• Why must props passed from a Server Component to a Client Component be serializable?
• How can a Client Component render a Server Component inside it?
• What is hydration, and what causes a hydration mismatch?