React Server Components: components that never ship to the browser

Siddharth’s product page ships 180 KB of JavaScript, mostly a markdown parser and a date library used to show text that never changes. Every phone downloads and runs that code just to display static content.

A Server Component runs only on the server, or at build time. It can read databases and files directly, and its code is never sent to the browser; only its rendered output is. A Client Component also runs in the browser, so it can use state, effects and event handlers.

In frameworks that support RSC, components are server components by default. The “use client” directive at the top of a file marks the boundary: that file and what it imports become client code.

// ProductPage.jsx (Server Component: no directive)
import { db } from "./db";
import { AddToCart } from "./AddToCart";
export default async function ProductPage({ id }) {
  const product = await db.product.find(id); // runs on the server only
  return (
    <main>
      <h1>{product.name}</h1>
      <Markdown>{product.description}</Markdown>
      <AddToCart productId={product.id} price={product.price} />
    </main>
  );
}

The server sends an RSC payload: the server components’ output plus references to client components and their props.