React Server Components

Chapter 01 — The Foundation

Two kinds of component.
One boundary between them.

React Server Components (RSC) render only on the server — once, during the request or at build time. They produce a serialized description of UI and stream it to the browser; their code is never sent to the client, so a Server Component adds 0 KB of JavaScript. Since React 19 and the Next.js App Router, components are Server Components by default — you opt a subtree into the client with "use client", never the other way.

The Cosmic Connection

Purusha & Prakriti — consciousness and matter

Chapter 02 — The Two Worlds

What each one can and can't do

A Server Component fetches data where the data lives — no API hop, no client loading state, no secrets leaked. Here's one awaiting the database directly:

// app/page.tsx — a Server Component (the default, no directive)
export default async function Page() {
  // runs on the server: await the DB directly, secrets stay here, 0 KB JS
  const products = await db.query("SELECT * FROM products");
  return (
    <ul>
      {products.map((p) => (
        <ProductCard key={p.id} product={p} />
      ))}
    </ul>
  );
}

Chapter 03 — The Boundary

"use client" is a door, not a sticker

The single most misunderstood thing about RSC: "use client" at the top of a file does not mean "this one component is a Client Component." It marks an entry point into the client bundle — that module and every module it imports become client code.

// AddToCartButton.tsx
"use client";   // ← the boundary: this module + all it imports = client bundle

import { useState } from "react";

export function AddToCartButton({ id }) {
  const [count, setCount] = useState(0);   // hooks need the client
  return (
    <button onClick={() => setCount(count + 1)}>
      Add to cart ({count})
    </button>
  );
}

The optimization is the inverse: a Server Component can render a Client Component and pass it server-rendered children as props. Those children stay on the server — the interactive shell stays thin.

// A Client Component can RENDER server-built children passed as props.
"use client";
export function Tabs({ children }) {   // children stay on the server
  const [open, setOpen] = useState(0);
  return <div onClick={() => setOpen(1)}>{children}</div>;
}

// page.tsx (Server) — ServerHeavy renders on the server, never shipped:
<Tabs><ServerHeavy /></Tabs>

Chapter 04 — Live Visualization

Watch the boundary cascade

A five-node tree. Click any node to flip it between Server and Client and watch the "use client" boundary drag everything below it into the bundle. The counter tracks the JavaScript shipped to the browser.

Chapter 05 — Deep Dive

The nuances that trip people up

This is where the surface-level tutorials stop. Here's what actually bites in production.

Chapter 06 — Dharma & The Boundary

The Karma of "use client"

// Every "use client" is a karmic vow…
"use client";          // this binds the whole module to the browser

// …and it cascades — every child imported below inherits the weight.
import { Child } from "./Child";   // Child is now client too — no choice

Chapter 07 — Test Yourself

RSC Trivia

Three questions. No peeking at the docs. Your karma is watching.