Field Guide · React Server Components

The anatomy of crossing the network boundary

A web app is one program that runs across two computers — a server and a client — separated by a network boundary. Bundling decides where code runs, when it runs, and what actually crosses: real data, rendered output, or only a reference. Click any block in the diagram, any concept card, or any highlighted term to open it up.

11
Anatomy nodes
02
Environments
08
Animated traces
∞
Re-renders
01 — THE MAP

One program, two computers

A web app is one program split across a server chip and a client chip, joined by a single network wire. The build compiles once and splits the graph at the 'use client' frontier; then one request traces the whole lifecycle — render down the server, cross the wire, paint and hydrate the client, and loop back on a Server Action. Trace weight shows what crosses: nothing from the server but data, the payload across, the heaviest JavaScript at hydration.

Tap any pad to open its detail
server client build / data the wire
SERVER trusted · data · secrets · 0 kb to client CLIENT the browser · user-controlled · owns the DOM BUILD-TIME compiles once · splits at the frontier modules graph bundle 'use client' deploy ↓ · split at the 'use client' frontier THE NETWORK · ONE WIRE serialize → TRUSTED · RENDERS Server environment data · secrets · 0 kb WHAT CROSSES References a pointer, not the value COMPOSE Nesting pass-as-props CLIENT → SERVER Server Action a callable reference INTERACTIVE Client environment hydrate · DOM · state FIRST PAINT Pre-render server HTML, painted ONE FULL LAP The lifecycle render ⇄ act ⇄ re-render

signal = one request  ·  trace weight = what crosses  ·  hairline on the server, heaviest at hydration  ·  the loop closes on the round-trip

idlePress Trace a request to watch one journey light up the circuit — render on the server to a hydrated, interactive page.

02 — THE PARTS

Eleven concepts, head to toe

Each card opens a full detail panel — verbatim explanation, code, and an interactive trace you can scrub. Same panels open from the diagram above.

03 — THE LEXICON

Glossary

Every highlighted term across the page resolves here. Click one to pin its definition; many definitions link onward to others.

Back to JIT-Atlas