Server Components

A product page whose code stays on the server

Every component so far ran in the browser. Even with server rendering, the browser downloads every component's code and runs it again to hydrate the page. For a product page, that's a lot of code for parts that never change once they're on screen: the name, the description, the reviews. And the data comes later still. The component has to ask an API for it in an Effect, after the page has loaded:

"use client";
import { useEffect, useState } from "react";
import AddToCart from "./AddToCart.jsx";

export default function ProductPage({ id }) {
  const [product, setProduct] = useState(null);
  useEffect(() => {
    fetch(`/api/products/${id}`)
      .then((response) => response.json())
      .then(setProduct);
  }, [id]);

  if (!product) return <p>Loading...</p>;
  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCart productId={product.id} price={product.price} />
    </main>
  );
}

Lines 7 to 11 fetch the product only after the first render, so line 13 shows Loading... first. You also need an API route on the server for /api/products/green-tea. (This block has no result: there's no API here.)

Server Components turn this around. A Server Component runs on the server, before anything reaches the browser, so it can read the database itself. Only what it rendered is sent; its code never is. The parts that need clicks stay ordinary components, now called Client Components. Here is the same page. The result is live: wait a moment for the server, then click Add to cart.

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import AddToCart from "./AddToCart.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./AddToCart.jsx": AddToCart };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

Open the ProductPage.jsx tab. Line 4 is an async function, and line 5 waits for the product from the database with await, right inside the component: no Effect, no state, no API. Lines 8 and 9 render the name and the description. Line 10 renders AddToCart, with the product's id and price as props.

Now open AddToCart.jsx. Line 1, "use client", marks it as a Client Component: it has state on line 5 and an onClick on line 7, so it must run in the browser. db.js is a pretend database that waits 0.4 seconds, as a real query might.

Under the page, the result lists two rows and one file: Client Component code the browser loads: ./AddToCart.jsx. ProductPage.jsx and db.js aren't there. They ran on the server and stayed there.

Server Components and Client Components

In an app that supports Server Components, like one built with Next.js's App Router, every component is a Server Component unless you say otherwise. They need a framework, because something has to run them on a server and decide which files go to the browser; the React frameworks lesson compares them.

Being on the server is what gives Server Components their powers. This one reads a Markdown file from the server's disk and turns it into HTML with a Markdown library:

// ProductDetails.jsx: a Server Component. No "use client", so it runs on the server only.
import { readFile } from "node:fs/promises";
import { marked } from "marked";

export default async function ProductDetails({ id }) {
  const text = await readFile(`./descriptions/${id}.md`, "utf8");
  return <article dangerouslySetInnerHTML={{ __html: marked(text) }} />;
}

Line 2 imports readFile from Node.js, which only exists on a server. Line 3 imports a Markdown library. Line 6 reads the file while rendering. The browser receives the finished <article>; it never downloads marked, or anything else this file imports. (This block runs on a server, so it has no result.)

The other side of the same coin: a Server Component renders once and is gone. It can't keep state, run Effects, or handle a click, because none of that happens on the server. That's what "use client" is for:

// AddToCart.jsx
"use client";
import { useState } from "react";
import { formatPrice } from "./formatPrice.js";

export default function AddToCart({ productId, price }) {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Add to cart: {formatPrice(price)}</button>;
}

"use client" on line 2 must come before any import (a comment above it is fine). It marks a boundary in the tree of imports, not just one component: AddToCart.jsx is client code, and so is everything it imports, like formatPrice.js on line 4, even though that file has no directive. All of it is sent to the browser. A file that only Server Components import stays on the server.

How to read the table: each row asks one question of both kinds of component.

"Client Component" doesn't mean "only in the browser". Frameworks still render Client Components on the server to make the first HTML, then hydrate them, as the hydration lesson showed. The difference is that a Server Component never runs in the browser.

Async components read data while they render

The ProductPage above was an async function, and React waited for its await before using what it returned. Only Server Components can do that. A Client Component that needs data from a promise reads it with use, inside a Suspense boundary.

The two work together. A Server Component can start a slow request without waiting for it, and hand the promise to a Client Component, which shows the rest of the page first:

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import Reviews from "./Reviews.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./Reviews.jsx": Reviews };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

In ProductPage.jsx, line 5 waits for the product: the page can't show without it. Line 6 starts loading the reviews but doesn't await: reviewsPromise is a promise. Line 10 passes it to Reviews, a Client Component. In Reviews.jsx, line 5 reads it with use, and lines 17 to 19 wrap that in a Suspense boundary.

Watch the result: the heading comes after 0.4 seconds with Loading reviews... under it, and the reviews about a second and a half later. In the payload, row 0 holds "reviewsPromise":"$@2": a promise, whose value will arrive as row 2. Row 2 comes last, when the database answers. Press Run again to watch it once more.

Server Components run on the server for each request, or once at build time for pages that are the same for everyone, the way static generation works. Which one is up to the framework and your page.

What can cross from server to client

A Server Component and a Client Component run in different places, so props between them have to travel: React writes them into the payload as text and rebuilds them in the browser. Only values React knows how to write can cross. Here's a Server Component that hands a function to a Client Component:

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import AddToCart from "./AddToCart.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./AddToCart.jsx": AddToCart };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

In ProductPage.jsx, line 12 passes onAdded, a function, to AddToCart. The result says The server stopped. Event handlers cannot be passed to Client Component props.: React's exact words. A function is code, and the server can't write code into the payload; the click would happen in the browser anyway. In the payload, "onAdded":"$2" points at row 2, 2:E…, an error row. The fix is to put the handler inside AddToCart, which runs where the click happens (exercise 3).

Try every kind of value. Each button passes a different tea prop to TeaCard, a Client Component:

import TeaCard from "./TeaCard.jsx";

export default function Page() {
  return <TeaCard tea="Green tea" />;
}

1:I["./TeaCard.jsx",["tea-card","tea-card.js"],"default"]
0:["$","$L1",null,{"tea":"Green tea"}]

The rule: plain data crosses. That's strings, numbers, booleans, null, undefined, arrays and plain objects of those, plus a few built-ins React handles, like Date, Map and promises, and JSX. Functions, objects made by a class, and symbols that only exist on the server don't. The one function that can cross is a Server Function, marked "use server": the browser gets a way to call it on the server. That's the next lesson, Server Functions. How to read the table: each row is something that can't cross, and what to do instead.

The other common mistake goes the opposite way: importing server-only code into a client file, such as a module that reads a secret. A client file's imports are sent to the browser, where anyone can read them. Next.js offers a guard for this:

// payments.js: code that must never reach the browser
import "server-only";

export async function chargeCard(orderId) {
  return fetch("https://payments.tea-shop.example/charge", {
    method: "POST",
    headers: { authorization: process.env.PAYMENTS_KEY },
    body: JSON.stringify({ orderId }),
  });
}

Line 2 imports the server-only package. In Next.js, if any client file imports payments.js, the build fails with an error, instead of the secret on line 7 quietly ending up in the browser.

Server Components inside Client Components

A Server Component can render Client Components, as ProductPage renders AddToCart. The other way round needs care: a Client Component can't import a Server Component, because everything a client file imports becomes client code. But it can show one that a Server Component passed in, usually as children. Here, the reviews sit inside a button that opens and closes them. Wait for the page, then click Show Reviews:

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import AddToCart from "./AddToCart.jsx";5import ShowMore from "./ShowMore.jsx";6 7// A bundler finds the files that start with "use client" and lists them like this.8const clientFiles = { "./AddToCart.jsx": AddToCart, "./ShowMore.jsx": ShowMore };9 10showServerPage(<ProductPage id="green-tea" />, clientFiles);

In ProductPage.jsx, lines 5 to 14 are Reviews, an async Server Component that reads the reviews from the database. Lines 22 to 24 render ShowMore, a Client Component, with <Reviews /> inside it. In ShowMore.jsx, line 5 keeps open in state and line 11 shows children when it's open, inside a Suspense boundary of its own. ShowMore doesn't know or care what its children are: they arrive already rendered.

In the payload, ShowMore's children are "$L3": row 3, which comes about a second and a half after the others, when Reviews has its data. The page and its buttons work before that. If you open ShowMore before row 3 arrives, the $L3 in its children suspends, so ShowMore's boundary shows Loading Reviews... until the row comes. Without that boundary, the nearest one would be the whole page's.

Here is the mistake to avoid: ShowMore importing Reviews itself.

// ShowMore.jsx
"use client";
import { useState } from "react";
import Reviews from "./Reviews.jsx"; // Reviews becomes client code here

export default function ShowMore({ productId }) {
  const [open, setOpen] = useState(false);
  return (
    <section>
      <button onClick={() => setOpen(!open)}>Show reviews</button>
      {open && <Reviews productId={productId} />}
    </section>
  );
}

Line 4 imports Reviews into a file with "use client", so Reviews becomes client code. Its database code would be sent to the browser, and async components aren't supported there: React 19.3.1 prints <Reviews> is an async Client Component. Only Server Components can be async at the moment. in the console. Pass it as children instead, as above.

Context works the same way. A Server Component can't create context, but it can render a provider from a client file, around anything:

// CartProvider.jsx
"use client";
import { createContext, useState } from "react";

export const CartContext = createContext(null);

export default function CartProvider({ children }) {
  const [items, setItems] = useState([]);
  return <CartContext value={{ items, setItems }}>{children}</CartContext>;
}

// Layout.jsx: a Server Component
import CartProvider from "./CartProvider.jsx";

export default function Layout({ children }) {
  return (
    <CartProvider>
      <header>Tea Shop</header>
      {children}
    </CartProvider>
  );
}

CartProvider keeps the cart in state (line 8) and provides it with context (line 9). Layout, a Server Component, renders it on lines 6 to 9, with the page as children. Every Client Component inside can read the cart, while the page around them stays on the server.

What the browser receives: the RSC payload

The rows you've been reading are the RSC payload: what the server sends the browser for a tree of Server Components. Here are the rows for the product page with reviews, as react-server-dom-webpack 19.3.1 wrote them (a production build; development builds add rows of debugging information):

1:I["./AddToCart.jsx",["add-to-cart","add-to-cart.js"],"default"]
2:I["./ShowMore.jsx",["show-more","show-more.js"],"default"]
0:["$","main",null,{"children":[["$","h1",null,{"children":"Green tea"}],["$","$L1",null,{"productId":"green-tea","price":4}],["$","$L2",null,{"label":"Reviews","children":"$L3"}]]}]
3:["$","ul",null,{"children":[["$","li","Fresh and grassy",{"children":"Fresh and grassy"}],["$","li","Great value",{"children":"Great value"}]]}]

Each line is one row: a number, a colon, then the row. Line by line:

1. Row 1 starts with I, for import. It names a Client Component: the file ./AddToCart.jsx, the chunk of JavaScript to download for it, and the export to use, default.
2. Row 2 does the same for ShowMore.
3. Row 0 is the page. Each ["$", type, key, props] is one element: "main" and "h1" are ordinary tags. Where a type is "$L1", the element is the component in row 1, with the props after it. ShowMore's children are "$L3", a row that hasn't arrived yet.
4. Row 3 arrives later: the reviews list, rendered. The keys on the list items are in it.

Notice what isn't there: no ProductPage, no Reviews, no db. Server Components leave only their output. The rows also come in the order they're ready, which is why row 0 comes after rows 1 and 2, and row 3 last. The browser shows what it has and fills in the rest as it arrives, like Suspense does with data.

The payload isn't HTML. For the very first load, a framework also turns it into HTML on the server, so the page shows before any JavaScript runs, and then hydrates the Client Components. On later navigations, it can fetch just the payload for the next page and update what's on screen, keeping the state of Client Components that stay. How to read the table: each row compares server rendering, from the earlier lessons, with Server Components.

If you'd like to see how this lesson's model writes and reads rows, here it is. You don't need it for the rest of the lesson. renderToPayload (lines 11 to 119) is the server half: line 105 calls a Server Component, line 107 waits for an async one at the top of a row, and lines 108 to 110 give one further down a row of its own, $L. Line 61 writes an import row. createResponse (lines 123 to 188) is the browser half: line 136 suspends until a row arrives, with use.

// mini-rsc.js: a small model of React Server Components, written for this lesson. It isn't React's
// code, and it only knows the values this lesson uses. For the lesson's examples it writes the same
// rows that React's real server package, react-server-dom-webpack 19.3.1, wrote for them.
import { createElement, use } from "react";

const ELEMENT = Symbol.for("react.transitional.element");
const FRAGMENT = Symbol.for("react.fragment");

// ---- The server half: run the Server Components, write the payload one row at a time ----------

export function renderToPayload(element, clientFiles, { onRow, onError }) {
  const fileOf = new Map(Object.entries(clientFiles).map(([file, component]) => [component, file]));
  const importRows = new Map();
  const ready = { imports: [], models: [], errors: [] };
  let nextId = 1;
  let stopped = false;
  let flushing = false;

  // Rows that are ready go out together: Client Component imports first, then models, then errors.
  function flush() {
    if (flushing) return;
    flushing = true;
    setTimeout(() => {
      flushing = false;
      if (stopped) return;
      const rows = [...ready.imports, ...ready.models, ...ready.errors];
      ready.imports = [];
      ready.models = [];
      ready.errors = [];
      for (const row of rows) onRow(row);
    });
  }

  function fail(message) {
    const id = nextId++;
    if (!stopped) onError(message);
    ready.errors.push(`${id}:E{"digest":""}`);
    return `$${id}`;
  }

  // One row: a value to serialize. A Server Component that awaits at the top of a row waits there.
  async function task(id, value) {
    while (true) {
      try {
        ready.models.push(`${id}:${JSON.stringify(toJSON(value, true))}`);
        flush();
        return;
      } catch (thrown) {
        if (!thrown?.waitFor) throw thrown;
        value = await thrown.waitFor;
      }
    }
  }

  function clientReference(component) {
    if (!importRows.has(component)) {
      const id = nextId++;
      const file = fileOf.get(component);
      const chunk = file.replace(/^\.\//, "").replace(/\.jsx?$/, "").replace(/(?<=[a-z])(?=[A-Z])/g, "-").toLowerCase();
      importRows.set(component, id);
      ready.imports.push(`${id}:I${JSON.stringify([file, [chunk, `${chunk}.js`], "default"])}`);
    }
    return `$L${importRows.get(component)}`;
  }

  function toJSON(value, atTop = false, isClientProp = false, name = "") {
    if (value === undefined) return "$undefined";
    if (value === null || typeof value === "number" || typeof value === "boolean") return value;
    if (typeof value === "string") return value.startsWith("$") ? `$${value}` : value;
    if (typeof value === "function") {
      return fail(
        /^on[A-Z]/.test(name) && isClientProp
          ? "Event handlers cannot be passed to Client Component props."
          : 'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.',
      );
    }
    if (typeof value === "symbol") return fail(`Only global symbols received from Symbol.for(...) can be passed to Client Components. The symbol Symbol.for(${value.description}) cannot be found among global symbols.`);
    if (typeof value.then === "function") {
      const id = nextId++;
      value.then((result) => task(id, result));
      return `$@${id}`;
    }
    if (Array.isArray(value)) return value.map((item) => toJSON(item));
    if (value instanceof Date) return `$D${value.toISOString()}`;
    if (value instanceof Map) {
      const id = nextId++;
      ready.models.push(`${id}:${JSON.stringify(toJSON([...value]))}`);
      return `$Q${id}`;
    }
    if (value.$$typeof === ELEMENT) return elementToJSON(value, atTop);
    if (Object.getPrototypeOf(value) !== Object.prototype) {
      return fail("Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.");
    }
    return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, toJSON(item, false, isClientProp, key)]));
  }

  function elementToJSON({ type, key, props }, atTop) {
    if (type === FRAGMENT) return toJSON(props.children);
    if (fileOf.has(type)) {
      const reference = clientReference(type);
      return ["$", reference, key, toJSON(props, false, true)];
    }
    if (typeof type === "function") {
      // A Server Component: call it here, on the server.
      const result = type(props);
      if (typeof result?.then !== "function") return toJSON(result, atTop);
      if (atTop) throw { waitFor: result };
      const id = nextId++;
      result.then((output) => task(id, output));
      return `$L${id}`;
    }
    return ["$", type, key, toJSON(props)];
  }

  task(0, element);
  return () => {
    stopped = true;
  };
}

// ---- The browser half: turn rows back into React elements --------------------------------------

export function createResponse(clientFiles) {
  const rows = new Map();

  function row(id) {
    if (!rows.has(id)) {
      let resolve;
      const promise = new Promise((done) => (resolve = done));
      rows.set(id, { promise, resolve, value: undefined, ready: false });
    }
    return rows.get(id);
  }

  function RowContent({ id }) {
    return use(row(id).promise);
  }

  function fromJSON(value) {
    if (typeof value === "string") {
      if (!value.startsWith("$")) return value;
      if (value.startsWith("$$")) return value.slice(1);
      if (value === "$undefined") return undefined;
      if (value.startsWith("$D")) return new Date(value.slice(2));
      if (value.startsWith("$@")) return row(Number(value.slice(2))).promise;
      if (value.startsWith("$Q")) return new Map(row(Number(value.slice(2))).value);
      if (value.startsWith("$L")) {
        const target = row(Number(value.slice(2)));
        if (target.ready && target.isImport) return target.value;
        return createElement(RowContent, { id: Number(value.slice(2)) });
      }
      return value;
    }
    if (Array.isArray(value)) {
      if (value[0] === "$" && value.length === 4) {
        const [, type, key, props] = value;
        const { children, ...rest } = fromJSON(props);
        if (key !== null) rest.key = key;
        return Array.isArray(children) ? createElement(fromJSON(type), rest, ...children) : createElement(fromJSON(type), rest, children);
      }
      return value.map(fromJSON);
    }
    if (value && typeof value === "object") return Object.fromEntries(Object.entries(value).map(([key, item]) => [key, fromJSON(item)]));
    return value;
  }

  return {
    root: createElement(RowContent, { id: 0 }),
    receive(text) {
      const [, id, tag, json] = /^(\d+):([A-Z]?)(.*)$/.exec(text);
      const target = row(Number(id));
      const data = JSON.parse(json);
      if (tag === "I") {
        target.isImport = true;
        target.value = clientFiles[data[0]];
      } else if (tag === "E") {
        target.value = new Error("The server couldn't send this value.");
      } else {
        target.value = fromJSON(data);
      }
      target.ready = true;
      // Like React's own rows, the promise says it's done, so use() can read it without waiting.
      target.promise.status = "fulfilled";
      target.promise.value = target.value;
      target.resolve(target.value);
    },
  };
}

React's real format has more kinds of row and more details than this model covers. The lesson Server Components inside: the Flight protocol reads it in React's source.

Splitting a shop page between server and client

Start with everything as a Server Component, and add "use client" only where the page needs the browser: state, Effects, event handlers, or browser-only things like localStorage. Put the directive as low in the tree as you can, on the small interactive parts, so the big parts stay on the server. A product page might end up like this:

• Server: the page itself, the product details, the reviews, the related products, the footer. They read data and render.
• Client: the Add to cart button, the image carousel, the size picker, the Show reviews toggle.

Server Components help most on pages with a lot of content and a little interaction, like a shop, a blog or documentation. An app that's interactive everywhere, like a drawing tool, gains less: most of it must run in the browser anyway.

Common mix-ups

• "'use server' marks a Server Component." No. Server Components have no directive. "use server" marks Server Functions, the next lesson.
• "Server Components are server-side rendering." No. SSR makes HTML and still sends every component's code. Server Components send a payload and keep their code on the server. Frameworks use both.
• "Client Components only run in the browser." No. Frameworks also render them on the server for the first HTML. They're the components whose code is sent to the browser.
• "Every component under a Client Component must have 'use client'." No. The directive marks a file and everything it imports. Components passed in as children can still be Server Components.
• "A Server Component can pass an onClick to a Client Component." No. Functions can't be written into the payload. Put the handler in the Client Component.
• "Server Components need a server running all the time." No. They can run once, when the app is built, for pages that are the same for everyone.

Practice exercises

Each exercise runs on the lesson's model, so the result shows the page and the payload. Press Edit & run, open the tab the task names, and change it.

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import AddToCart from "./AddToCart.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./AddToCart.jsx": AddToCart };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

1import { db } from "./db.js";2import AddToCart from "./AddToCart.jsx";3 4export default async function ProductPage({ id }) {5  const product = await db.products.find(id);6  return (7    <main>8      <h1>{product.name}</h1>9      <p>{product.description}</p>10      <p>Price: ${product.price}</p>11      <AddToCart productId={product.id} price={product.price} />12    </main>13  );14}

import { db } from "./db.js";
import AddToCart from "./AddToCart.jsx";

export default async function ProductPage({ id }) {
  const product = await db.products.find(id);
  return (
    <main>
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <AddToCart productId={product.id} price={product.price} />
    </main>
  );
}

1"use client";2import { useState } from "react";3 4export default function AddToCart({ productId, price }) {5  const [count, setCount] = useState(0);6  return (7    <button onClick={() => setCount(count + 1)}>8      Add to cart: ${price} ({count} added)9    </button>10  );11}

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import AddToCart from "./AddToCart.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./AddToCart.jsx": AddToCart };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

1"use client";2import { useState } from "react";3 4export default function AddToCart({ productId, price }) {5  const [count, setCount] = useState(0);6  return (7    <button8      onClick={() => {9        setCount(count + 1);10        console.log("added");11      }}12    >13      Add to cart: ${price} ({count} added)14    </button>15  );16}

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import AddToCart from "./AddToCart.jsx";5import ShowMore from "./ShowMore.jsx";6 7// A bundler finds the files that start with "use client" and lists them like this.8const clientFiles = { "./AddToCart.jsx": AddToCart, "./ShowMore.jsx": ShowMore };9 10showServerPage(<ProductPage id="green-tea" />, clientFiles);

1import { db } from "./db.js";2import AddToCart from "./AddToCart.jsx";3import ShowMore from "./ShowMore.jsx";4 5async function Reviews({ productId }) {6  const reviews = await db.reviews.forProduct(productId);7  return (8    <ul>9      {reviews.map((text) => (10        <li key={text}>{text}</li>11      ))}12    </ul>13  );14}15 16export default async function ProductPage({ id }) {17  const product = await db.products.find(id);18  return (19    <main>20      <h1>{product.name}</h1>21      <AddToCart productId={product.id} price={product.price} />22      <ShowMore label="Reviews">23        <Reviews productId={product.id} />24      </ShowMore>25    </main>26  );27}

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import Restock from "./Restock.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./Restock.jsx": Restock };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

1import { db } from "./db.js";2import Restock from "./Restock.jsx";3 4export default async function ProductPage({ id }) {5  const product = await db.products.find(id);6  return (7    <main>8      <h1>{product.name}</h1>9      <Restock restockedOn={product.restockedOn} />10    </main>11  );12}

1// main.jsx: asks the pretend server for ProductPage, as a framework does for a page.2import { showServerPage } from "./framework.jsx";3import ProductPage from "./ProductPage.jsx";4import TeaPanel from "./TeaPanel.jsx";5 6// A bundler finds the files that start with "use client" and lists them like this.7const clientFiles = { "./TeaPanel.jsx": TeaPanel };8 9showServerPage(<ProductPage id="green-tea" />, clientFiles);

1import { db } from "./db.js";2import AddToCart from "./AddToCart.jsx";3 4export default async function ProductPage({ id }) {5  const product = await db.products.find(id);6  return (7    <main>8      <h1>{product.name}</h1>9      <p>{product.description}</p>10      <AddToCart productId={product.id} price={product.price} />11    </main>12  );13}

Check your understanding

For each question, ask where the code runs, and what has to travel between server and browser.

Key takeaways

• Server Components run only on the server, per request or at build time. They can be async and read data directly, and their code never reaches the browser.
• "use client" at the top of a file makes it, and everything it imports, client code. Client Components handle state, Effects and events. There is no directive for Server Components.
• Props from a Server Component to a Client Component must be data React can write: plain values, arrays, plain objects, Dates, Maps, promises and JSX. Functions can't cross, except Server Functions.
• A Client Component can't import a Server Component, but it can show one passed in as children or another prop.
• The RSC payload describes the rendered tree in rows, with references to Client Components and to rows that come later. Frameworks also turn it into HTML for the first load.

Coming next: Server Functions. With "use server", the browser can call a function that runs on the server, from a form or a click.