vercel /

Next.js

Live map
View repository
Snapshotcanary · dd76599

A request moving through routing, cache state, an App Page route module, server rendering, and hydration.

Click a building or route
Choose a path

Route a request and use fresh cached state.

System map7 components · 10 connections
130%
Next.js request city architectureChoose the cache shortcut first, then compare it with the full render-and-hydrate path.URL + router state + R…normalized request + p…cache key + route kind…value + stale flag + r…Router ServerBase ServerBrowserApp RouterIncrementalCacheApp PageModuleHydrationRuntimeRSC & HTMLRenderer
Connections
BuildingsEntryServiceComputeStorageRuntimeToolingExternal

Terms, in plain English

App RouterNext.js's nested route system built around layouts, server components, and route segments.

How to study this repo

  1. 1
    Follow one URL

    Trace router-server.ts into BaseServer and the matched route module.

  2. 2
    Split HTML from Flight

    Identify which stream paints the page and which reconstructs React state.

  3. 3
    Compare hit and miss

    Trace fresh and stale cache states to see why revalidation changes the path.