Client-Server Boundary
The line in an application where execution moves from the server to the browser.
The client-server boundary is the point at which code stops running on the server and starts running in the visitor's browser. In older architectures it coincided with the network request. In modern component frameworks it can sit inside a single page, at the granularity of a component.
Making it explicit has three effects. It determines what ships: everything on the client side of the line is downloaded, parsed, and executed by every visitor. It determines what is reachable: secrets, direct database access, and the filesystem exist on one side only. And it determines what must be serialisable, since only data crosses.
The boundary is where adapters belong. Data from a storage layer is typically shaped by that layer's constraints — optional fields typed as nullable, presentation values stored beside content, identifiers that mean nothing to the view. Converting that into the shape the interface actually wants, at the boundary, keeps storage concerns out of rendering code. Widening a view type to accept the storage layer's nullability is the tempting shortcut and it pushes the problem inward, defeating the point of having a boundary at all.
The commonest way it goes wrong is accidental: an import added for convenience drags a module across the line, and a large dependency lands in every visitor's bundle. Lint rules restricting which modules may be imported from which directories are the standard defence.
See also6
Hand-picked in the note itself — the neighbours worth reading next.
React Server Components
Components that execute only on the server and never ship their code to the browser.
Web Platform16 connections
Module Graph
The directed graph of imports that decides what code ends up where.
Web Platform16 connections
Code Splitting
Dividing an application bundle so a page downloads only the code it needs.
Web Platform12 connections
Schema Drift
Divergence between a schema and the code, types, or documentation that describe it.
Data & Content9 connections
Hydration
Attaching client-side behaviour to server-rendered markup without rebuilding it.
Web Platform12 connections
Server-Side Rendering
Producing a page's HTML on the server so the first response is already content.
Web Platform18 connections
Related3
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from7
Notes elsewhere in the wiki that reach for this one.
- Code SplittingWeb Platform
Dividing an application bundle so a page downloads only the code it needs.
- HydrationWeb Platform
Attaching client-side behaviour to server-rendered markup without rebuilding it.
- Incremental Static RegenerationWeb Platform
Serving a cached static page while regenerating it in the background after a chosen interval.
- Module GraphWeb Platform
The directed graph of imports that decides what code ends up where.
- React Server ComponentsWeb Platform
Components that execute only on the server and never ship their code to the browser.
- Schema DriftData & Content
Divergence between a schema and the code, types, or documentation that describe it.
- Server-Side RenderingWeb Platform
Producing a page's HTML on the server so the first response is already content.