Web development

Which code reaches the browser

About 4 min if you have seen this material before, 15 min or so if it is new to you.

Background

The single most important idea in this codebase is that not all of it runs in the same place. By default every component is a : it executes on the server during rendering, and only the HTML it produced is sent to the browser. Its source never leaves the machine. A A component marked 'use client', whose code is shipped to the browser so it can handle interaction and hold state. is the exception, marked by 'use client' at the top of the file. Its code is bundled and shipped, because it has to respond to typing and clicking, which can only happen where the user is.

Here are two files from this project, abridged. Exactly one of them has its code sent to the browser. Which? Answer with the filename.

// src/lib/content.ts
import fs from "node:fs";
export function getQuestion(domain, slug) {
  return parse(fs.readFileSync(pathFor(domain, slug), "utf-8"));
}

// src/app/problems/[domain]/[slug]/answer-form.tsx
"use client";
export function AnswerForm({ domain, slug }) {
  const [state, formAction, pending] = useActionState(submitAnswer, null);
  return <form action={formAction}>...</form>;
}

Past 40 min on this? That usually means a missing prerequisite rather than a lack of effort — worth reading up before pushing further, starting with Server Components (React docs).

Want to go deeper?

Server Components (React docs)