React Server Components vs SSR — what is the real difference?

import { useState } from "react";

// This playground has no RSC runtime — react-server-dom-webpack is not
// installed, and a Server Component needs a bundler-integrated server. So this
// is an ANNOTATED reference of the boundary rather than a running one, plus a
// live demo of the one part that does work in a browser: passing an unresolved
// promise into a component that reads it.

const SERVER_COMPONENT = `// app/product/[id]/page.jsx  — NO "use client"
// Runs on the server. Its code never enters the client bundle.
import { marked } from "marked";        // ~40KB, stays on the server
import { db } from "@/lib/db";          // never shipped to the browser

export default async function ProductPage({ params }) {
  //  async is allowed: a server render happens once and is never re-entered
  const product = await db.product.findUnique({ where: { id: params.id } });

  return (
    <article>
      <h1>{product.name}</h1>

      {/* marked runs here; the browser never downloads it */}
      <div dangerouslySetInnerHTML={{ __html: marked(product.description) }} />

      {/* A CLIENT component. Only THIS subtree ships. */}
      <AddToCart productId={product.id} price={product.price} />

      {/*  a function cannot cross the boundary:
          <AddToCart onAdd={() => ...} />   -> not serialisable */}
    </article>
  );
}`;

const CLIENT_COMPONENT = `// components/AddToCart.jsx
"use client";                    // <- the boundary. Everything this imports ships.
import { useState } from "react";

export default function AddToCart({ productId, price }) {
  const [qty, setQty] = useState(1);      // state: only possible here
  return (
    <div>
      <input value={qty} onChange={(e) => setQty(+e.target.value)} />
      <button onClick={() => addToCart(productId, qty)}>Add · {price * qty}</button>
    </div>
  );
}`;

const TABS = [
  ["Server Component", SERVER_COMPONENT, "#eef7ee"],
  ["Client Component", CLIENT_COMPONENT, "#eef"],
];

export default function App() {
  const [tab, setTab] = useState(0);

  return (
    <div style={{ padding: 24, fontFamily: "system-ui", lineHeight: 1.6, maxWidth: 620 }}>
      <div style={{ display: "flex", gap: 8, marginBottom: 10 }}>
        {TABS.map(([label], i) => (
          <button key={label} onClick={() => setTab(i)} style={{ fontWeight: i === tab ? "bold" : "normal" }}>
            {label}
          </button>
        ))}
      </div>

      <pre style={{ background: TABS[tab][2], border: "1px solid #ddd", borderRadius: 8,
                    padding: 12, fontSize: 12, overflowX: "auto", whiteSpace: "pre-wrap" }}>
{TABS[tab][1]}
      </pre>

      <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, marginTop: 10, fontSize: 13 }}>
        <strong>What crosses the boundary</strong>
        <table style={{ width: "100%", fontSize: 12, marginTop: 6, borderCollapse: "collapse" }}>
          <tbody>
            {[
              ["strings, numbers, plain objects, arrays", "✅ crosses"],
              ["an unresolved promise (read with use())", "✅ crosses"],
              ["rendered children as a prop", "✅ crosses"],
              ["a function or event handler", "❌ not serialisable"],
              ["a class instance, a Date method, a Map", "❌ not serialisable"],
            ].map(([what, ok]) => (
              <tr key={what}>
                <td style={{ padding: "2px 8px 2px 0" }}>{what}</td>
                <td style={{ color: ok.startsWith("✅") ? "#161" : "#a33" }}>{ok}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <p style={{ fontSize: 13, color: "#666" }}>
        The asymmetry to remember: <code>marked</code> and the database client in
        the first tab never reach the browser at all, while under plain SSR every
        component that renders HTML must also ship as JavaScript so it can
        hydrate. That is the bundle-size difference RSC is actually about.
      </p>
    </div>
  );
}