React Server Components in 2026: mental model + real patterns

Server components explained without the hype — the mental model, when to use them, and the two patterns that keep code sane.

Two years after React Server Components (RSC) shipped in Next.js, the mental model has settled. Here is what you actually need to know if you write React in 2026.

The mental model

• Server components — run only on the server. They can talk to the DB, read env vars, and never ship JS to the client.
• Client components — run in the browser (and pre-render on the server for HTML). Marked with "use client".
• Server can import client; client cannot import server.

Rule of thumb — where to draw the line

Default new components to server. Add "use client" only when you need:

• State (useState, useReducer).
• Effects (useEffect, useLayoutEffect).
• Event handlers (onClick, etc.).
• Browser-only APIs (window, localStorage).

Pattern 1 — server component wraps client component with children

// server component
export default async function Page() {
  const user = await db.user.findFirst();
  return (
    <Layout>
      <h1>Welcome {user.name}</h1>
      {/* Client interactivity, but the SC still owns the DB call */}
      <InteractiveWidget initialCount={user.plays} />
    </Layout>
  );
}

Pattern 2 — Server Actions for mutations

// actions.ts
"use server";
export async function createTodo(formData: FormData) {
  const title = String(formData.get("title"));
  await db.todo.create({ data: { title } });
  revalidatePath("/todos");
}

// form.tsx (client component)
"use client";
import { createTodo } from "./actions";
export function TodoForm() {
  return (
    <form action={createTodo}>
      <input name="title" />
      <button>Add</button>
    </form>
  );
}

What RSC solves

• No more "fetch data on the client and show a spinner".
• Zero JS shipped for read-only UI.
• Data access lives next to the component, not in a separate /api layer.

Where it hurts

• Framework lock-in — RSC is essentially a Next.js / Remix feature today.
• Debugging errors across the server/client boundary can be confusing at first.
• Long-running server components block streaming — use <Suspense> boundaries to chunk them.

RSC is not "React on the server" — it's "less React in the browser". That's the whole point.