Watch it run.^*

import { cacheLife } from "next/cache";

// No "use client" at the top: this is a Server Component.
// It runs in Node.js, its output is cached, zero JS ships.
async function getServerFacts() {
  "use cache";
  cacheLife("hours");
  return {
    nodeVersion: process.version, // browsers don't have one
    renderedAt: new Date().toISOString(),
  };
}

export async function ServerCard() {
  const facts = await getServerFacts();
  return <Card side="server">Rendered in Node.js {facts.nodeVersion}</Card>;
}

"use client"; // this one directive is the entire boundary

import { useState } from "react";

export function ClientCard() {
  const [count, setCount] = useState(0);

  return (
    <Card side="client">
      <button onClick={() => setCount(count + 1)}>Click me</button>
      {count}
    </Card>
  );
}

// bake.ts — the cache entry (lives in the static shell)
export async function getBake() {
  "use cache";
  cacheTag("landing-shell");
  cacheLife("days");
  return {
    bakedAt: new Date().toISOString(),
    id: crypto.randomUUID().slice(0, 8), // the fingerprint
  };
}

// actions.ts — the mutation
"use server";

export async function rebakeShell() {
  updateTag("landing-shell"); // expires it now, for everyone
  return { rebakedAt: new Date().toISOString() };
}

// slow-row.tsx — genuinely slow, on the server, per request
export async function SlowRow({ delayMs, label }) {
  await connection(); // request-time work starts here
  await sleep(delayMs);
  return <Row label={label} landedAt={new Date()} />;
}

// in the page — the shell ships instantly, rows land when done.
// A new run id makes new boundaries, so the fallbacks show again.
<Suspense fallback={<RowSkeleton />} key={`run-${run}-${row.label}`}>
  <SlowRow delayMs={row.delayMs} label={row.label} />
</Suspense>

// actions.ts — the entire backend of this demo
"use server";

export async function pressTheButton() {
  const jar = await cookies();
  const count = parseCount(jar.get("playground-presses")?.value);
  jar.set("playground-presses", String(count + 1), { httpOnly: true });
  // Cookie changed, so Next.js re-renders this page's server tree —
  // the count you see is read back on the server, not tracked in JS.
}

// press-form.tsx — the entire frontend
const [, formAction, pending] = useActionState(pressTheButton, null);

return <form action={formAction}>{/* a button */}</form>;

// app/api/og/route.tsx — a PNG factory disguised as a route
import { ImageResponse } from "next/og";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = clampTitle(searchParams.get("title"));
  const fonts = await loadFonts(); // real .ttf files, read once

  return new ImageResponse(
    <div style={{ display: "flex", backgroundColor: "#071e26" }}>
      {title}
    </div>,
    {
      width: 1200,
      height: 630,
      fonts: [{ name: "JetBrains Mono", data: fonts.bold, weight: 700 }],
    }
  );
}