Field Guide · Next.js 16 × Node.js runtime

The anatomy of a Next.js request

A Next.js app is one program orchestrated across a build pipeline, a server runtime, and the browser. Node.js is the host process; React is the renderer; Next.js is the conductor that decides where code runs, when it runs, what gets cached, and what actually crosses the wire. Click any block in the diagram, any layer card, or any highlighted term to open it up.

11
Architecture layers
02
Server runtimes
08
Animated traces
∞
Streamed chunks
01 — THE STACK

Three regions. Two computers. One wire.

Next.js is one program that runs across two computers — a trusted server and an untrusted browser — joined by a single wire. A build region compiles your source once and ships 0 kb of itself. Then follow the signal: a request lands on the runtime, descends the server, crosses the once as a stream of HTML and , paints and in the browser, then loops back across the top the moment a or navigation fires. The trace thickens with the client JavaScript it carries — hairline across the server (0 kb), heaviest at hydration. Tap any node to open its detail.

Tap any node · the signal traces one request
build · once server · Node edge · browser the wire
SERVER trusted · data · secrets · 0 kb to client BROWSER untrusted · user-controlled · owns the DOM BUILD-TIME · COMPILES ONCE source → server bundle + client chunks · ships 0 kb of itself source conventions SWC Turbopack deploy ↓ THE NETWORK · ONE WIRE FCP · 0 kb JS paint the streamed HTML TTI · interactive then an action loops back or DEFAULTNode.jsfull APIs OPT-INEdgeWeb APIs GATEWAYProxyrewrite · redirect ROUTINGMatch & adapturl → segment RENDERServer Components→ Flight payload TRANSPORTStreaming SSRshell, then fill THE WIRENetwork boundaryserialize ⇄ deserialize FIRST PAINT → INTERACTIVEHydrationhydrate · islands ROUND-TRIP · THE LOOP CLOSESAction / navigation↩ Server Action

signal = one request  ·  trace weight = client JS shipped  ·  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 stack — socket to hydrated UI.

The wire · annotated

What actually crosses: the RSC payload

Everything upstream collapses into this — a stream of numbered Flight rows. Data is inlined, client islands become $L import references, and Server Actions become opaque $F handles whose bodies never ship. itap any token for a context-aware note — or hit the floating i to reveal every annotation at once.

Flight payload · annotatedrsc
0:[ "$","main",null,{"children":[  ["$","h1",null,{"children":"The Future of React"}],  ["$","$L1",null,{"comments":[{"id":1,"body":"Great post!"}]}],  ["$","$L2",null,{"postId":42,"onLike":"$F3"}],  ["$","$Sreact.suspense",null,{"fallback":["$","p",null,{"children":"Loading…"}],"children":"$L5"}]]}]1:I{"id":"./CommentSection.js","chunks":["chunk:abc"],"name":"CommentSection"}   // client ref2:I{"id":"./LikeButton.js","chunks":["chunk:def"],"name":"LikeButton"}3:{"id":"likePost","bound":null}   // server action — body stays on the server5:[ "$","section",null,{"children":"…resolved comments…"}]   // $L5 streams in later
0: row id "$" element marker element type prop key inlined data $L client ref $F server action $S suspense / stream
02 — THE LAYERS

Eleven layers, top to bottom

Each card opens a full detail panel — explanation, real code, and an interactive trace you can scrub. The 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