Watch it run.^*

// 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>;
}

// step 1 — add a copy button. useState in this file stops the build:
// "This React Hook only works in a Client Component."

// card.tsx — after step 2. The directive went on top of everything
// the file already was, and the build stops again:
// "It is not allowed to define inline "use cache" annotated
//  functions in Client Components."
"use client";
import { cacheLife } from "next/cache";
import { useState } from "react";

async function getLatestCommit() {
  "use cache"; // ⨯ no client form — this line is the second refusal
  cacheLife("hours");
  /* … */
}

// card.tsx — after step 3. No directive again: 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);
  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 }],
    }
  );
}