Skip to main contentData Garden

Next.js in Practice: from request to pixels

Map of the Next.js in Practice course, with a one-line summary of every part and a diagram of how a request flows through Next.js 16.4.3.

Published
Reading time
3 min read
Next.js in PracticePart 00 · 1 of 26
Summary: TL;DR

A request to a Next.js 16 app passes through five stages. Proxy (proxy.ts, formerly middleware) can rewrite, redirect or reject it. The router matches the URL against the loader tree built from app/. Rendering runs Server Components to an RSC Payload and Client Components to HTML. The cache layer ('use cache', prerendered shells, the client segment cache) decides what can be reused instead of rendered. Streaming sends the static shell first and fills the dynamic holes through Suspense. The Features track explains each stage, the Patterns track combines them into rendering and auth strategies, and the Recipes track fixes the problems you hit along the way.

All parts are pinned to Next.js v16.4.3 (tag commit 29bbeab). Footnotes link to exact line ranges at that tag.

How a request flows through Next

Flowchart

Diagram source:

flowchart LR
    B["Browser<br/>document or RSC request"] --> P["proxy.ts<br/>rewrite, redirect, headers"]
    P --> R["Router<br/>match loader tree<br/>params, slots"]
    R --> C{"Cached?<br/>prerendered shell,<br/>'use cache' entries"}
    C -->|hit| S["Static shell"]
    C -->|miss| X["Render<br/>Server Components<br/>to RSC Payload"]
    X --> S
    S --> T["Stream<br/>HTML + payload,<br/>Suspense holes fill in"]
    T --> H["Browser<br/>hydrate, segment cache,<br/>prefetch next links"]
    H -->|"Link click"| B

The same pipeline serves both kinds of request. A first visit asks for a document and gets HTML with the RSC Payload inlined. A client navigation asks only for the RSC Payload of the segments that changed. Mutations re-enter it through Server Actions and revalidation.

Features track

How each built-in feature works, with links into the source.

Patterns track

Complete strategies built from the features.

  • 20 · Rendering Strategies: SSG, ISR, SSR, PPR, CSR and SPA compared, how Next decides static vs dynamic, and a decision flowchart.
  • 21 · SSG and ISR: prerendering pages at build time and regenerating them later.
  • 22 · SSR: rendering per request, and what makes a route dynamic.
  • 23 · PPR: a static shell with postponed holes, resumed per request.
  • 24 · CSR Islands: client components that fetch on mount, ssr: false, and when that is the right call.
  • 25 · SPA and Static Export: output: 'export', an SPA shell, and the limits of client-only routing.
  • 26 · TanStack Query: per-request clients, server prefetch, HydrationBoundary, streaming pending queries and mutations.
  • 27 · Server-Aware Auth: cookie sessions, optimistic checks in proxy.ts, a Data Access Layer, and auth with Cache Components.
  • 28 · Client-Only Auth: tokens for an external API, client route guards, refresh tokens, and the trade-offs against part 27.

Recipes track

Short problem, cause, fix entries.

Reading order suggestions

  • New to the App Router: 01 → 02 → 03 → 04, then 20.
  • Choosing an architecture: 20, then the pattern parts that match (21 to 28).
  • Upgrading to 16 with caching in mind: 05 → 06 → 23.
  • Fixing something today: jump to the recipe part, then follow its links back into the features.

Start: The App Router →