# Server/Client Boundaries & Routing

**Track:** The Full-Stack Substrate — AI-Native Full-Stack Development — complete (30)
**Framework / surface:** web dev (Next.js App Router)
**Level:** Intermediate
**Prerequisites:** Components, State & Events, Map the Whole System

**In one line:** Decide what executes in the browser, what executes on the server, and how URLs map to application behavior.

## Theory, aesthetics & inspiration

Full-stack frameworks make client and server feel like one codebase; they do not make them one trust domain. The browser is controlled by whoever operates it and must be treated as untrusted; the server holds secrets, enforces authorization, and performs privileged writes. React's Server Components — and the Next.js App Router built on them — make the boundary explicit inside a single component model: server components render with privileged access, client components handle interaction, and server functions let forms invoke mutations without hand-built endpoints, while routing turns URLs into the application's information architecture. The durable lesson is placement, not directory syntax: render public data on the server, keep the drag interaction in the client, keep the model API key server-side only, and authorize every mutation where it executes. Agent-generated code fails here in a characteristic way — logic lands in the easiest file rather than the least-privileged place — and the reviewer's job is to catch exactly that.

**Builder question:** For each operation in your feature, what is the least-privileged place where it can safely execute?