Wait — it does that?

// card.tsx — as it started. No directive: a Server Component,
// like every file that doesn't say otherwise.
import { cacheLife } from "next/cache";

async function getLatestCommit() {
  "use cache";
  cacheLife("hours");
  const response = await fetch(
    "https://api.github.com/repos/hasToggle/hasToggle.dev/commits/main"
  );
  const { sha, commit } = await response.json();
  return { sha: sha.slice(0, 7), subject: commit.message.split("\n")[0] };
}

export async function Card() {
  const { sha, subject } = await getLatestCommit();
  return <p>latest commit {sha} — {subject}</p>;
}

// card.tsx — with the copy button. Still no directive: the fetch never
// left Node, and the one file that needs the browser carries its own line.
import { CopyButton } from "./copy-button";

export async function Card() {
  const { sha, subject } = await getLatestCommit();
  return <p>latest commit {sha} <CopyButton value={sha} /></p>;
}

// copy-button.tsx — the entire client bundle of this card.
"use client";
import { useState } from "react";

export function CopyButton({ value }) {
  const [copied, setCopied] = useState(false);
  return (
    <button onClick={() => {
      navigator.clipboard.writeText(value);
      setCopied(true);
    }}>
      {copied ? "copied" : "copy"}
    </button>
  );
}

// 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, 6), // the fingerprint — and a CSS color
  };
}

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

export async function rebakeShell() {
  updateTag("landing-shell"); // expires it now, for everyone
  // The tag's expiry is stamped after this render finishes, so the bake in
  // this response was cached for nobody. The next request makes the real one.
  return { rebakedAt: new Date().toISOString() };
}

// rebake-panel.tsx — button two, the "ask"
router.refresh(); // no cache API anywhere — one more request for the page,
                  // indistinguishable from a new tab or another visitor

// the same three calls in every arrangement. only the boundary moves.
const rows = [
  { label: "a quick database query",           delayMs:  400 },
  { label: "a third-party API with opinions",  delayMs: 1100 },
  { label: "the legacy service nobody dares",  delayMs: 1900 },
];

// 1 — fetch it all first, then render
<Suspense fallback={null}>
  <GroupRows />   {/* awaits all three, then returns all three */}
</Suspense>

// 2 — add a fallback. this is what loading.tsx is.
<Suspense fallback={<GroupPending />}>
  <GroupRows />   {/* same component, same wait */}
</Suspense>

// 3 — wrap each part
{rows.map((row) => (
  <Suspense fallback={<PendingRow {...row} />} key={row.label}>
    <SlowRow {...row} />   {/* awaits its own work, and nobody else's */}
  </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) + 1;
  jar.set("playground-presses", String(count), { 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.

  // The request view is drawn from what this function saw:
  const incoming = await headers();
  return {
    actionId: incoming.get("next-action"), // the function's id — the route
    contentType: incoming.get("content-type"), // multipart/form-data
    count,
  };
}

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

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

// state-card.tsx
"use client";

import { useState } from "react";

export function StateCard() {
  const [count, setCount] = useState(0);
  // setCount does both jobs: it stores the value where React keeps it
  // between calls, and it schedules the render that repaints the screen.
  return (
    <Card pill="useState">
      <button onClick={() => setCount(count + 1)}>+1</button>
      <p>{count}</p>
    </Card>
  );
}