hasToggle
The boundaryserver & client components

What if your components could talk to the database directly?

They can, and most of yours already do. Every component in the App Router starts on the server, so it can call the API, read the database, hold the key, and finish its work before the page reaches your visitor. The browser gets the result, not the work. "use client" marks the one file that needs the browser, and that file is usually small.

The component below fetched this repo’s latest commit in Node.js and arrived as finished HTML. Add a copy button to the hash and watch where it lands: in its own file, inside its own line. The fetch never moves. The button is the only thing that ships.

live
Server Componentcard.tsx

// no directive

latest commit 5fb9ad4

chore(deps): update dependency ultracite to v8 (#529)11 Oct 2026, 02:03:14 UTC

Fetched from api.github.com in node v24.21.0 at 02:03:57 UTC, then cached — re-served to every visitor until the entry revalidates or a deploy replaces it.

  • runs in Node.js: the database, the secrets, the filesystem
  • ships 0 kB of JavaScript
  • renders once, returns HTML, and is gone

the dashed line is the server · every file lives here unless its first line says otherwise

card.tsx · before, after
// 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>
  );
}
docssource