Capítulo 285 de 456

Glossary

Core Idea

Alphabetical glossary of core Next.js App Router terminology, cross-linking related concepts (rendering, caching, routing, directives).

Key Concepts

  • App Router: file-system router (v13+) built on React Server Components; supports layouts, nested routing, loading/error states.
  • App Shell: per-route prerender of URL-independent page parts; cached content included when stale ≥ 5 min; default prefetch payload and PPR/ISR-with-Cache-Components fallback.
  • Build time: compilation stage (next build) producing optimized production files and static pages.
  • Cache Components: "use cache" directive-based component/function-level caching; mixes static/cached/dynamic content in one route via a prerendered shell + streamed dynamic content.
  • Catch-all Segments: [...folder]/page.js dynamic segments matching multiple URL parts.
  • Client Bundles: browser-sent JS, automatically split via the module graph.
  • Client Component: browser-runnable component marked "use client"; can use state/effects/browser APIs; can still render on server during initial generation.
  • Client-side navigation: <Link>-driven navigation without full reload, preserving layout state.
  • Client Cache: in-browser cache of RSC Payload for visited/prefetched routes; cleared on refresh; invalidated via revalidateTag, revalidatePath, updateTag, router.refresh, cookies.set/delete; duration via staleTimes or cacheLife's stale property.
  • Code Splitting: automatic per-route JS chunking.
  • Dynamic rendering: request-time rendering, triggered by Request-time APIs.
  • Dynamic route segments: [slug]-style folders generating routes from data.
  • Environment Variables: NEXT_PUBLIC_-prefixed vars exposed to browser; others server-only.
  • Error Boundary: error.js auto-wraps a segment in a React error boundary.
  • Font Optimization: next/font self-hosts fonts, eliminates layout shift.
  • File-system caching: Turbopack disk-persisted compiler artifacts across dev/build runs.
  • Hydration: React attaching event handlers to server-rendered HTML.
  • Import Aliases: tsconfig/jsconfig paths/baseUrl shorthand imports.
  • Incremental Static Regeneration (ISR): per-page static generation with background revalidation; also called Revalidation.
  • Intercepting Routes: load a route from elsewhere in the app within the current layout (e.g. modals) while keeping the URL shareable.
  • Image Optimization: <Image> component; on-demand optimization, WebP, lazy loading, responsive sizing.
  • Layout: shared UI across pages (layout.js); preserves state, doesn't re-render on navigation.
  • Loading UI: loading.js fallback, auto-wraps in a Suspense boundary.
  • Module Graph: dependency graph of files (nodes) and import/export edges, used for bundling/code-splitting decisions.
  • Metadata: page <head> info via metadata export or generateMetadata.
  • Memoization: fetch GET requests with identical URL/options auto-memoized per render pass across Server Components/layouts/pages/generateMetadata/generateStaticParams (not Route Handlers); non-fetch ops use React cache().
  • Middleware: see Proxy (renamed).
  • Not Found: not-found.js / notFound() special component for missing routes.
  • Private Folders: _-prefixed folders excluded from routing.
  • Page: route-unique UI via page.js.
  • Parallel Routes: simultaneous/conditional multi-page rendering via @folder named slots.
  • Partial Prefetching: <Link> prefetches only the per-route App Shell by default for Cache Components routes; enabled via partialPrefetching: true.
  • Partial Prerendering (PPR): combines prerendering + dynamic rendering in one route; static shell served immediately, dynamic content streams in.
  • Prefetching: background route loading via <Link> on viewport entry.
  • Prerendering: build-time or background-revalidation rendering, producing cacheable HTML + RSC Payload; default when no Request-time APIs are used.
  • Proxy: proxy.js, server-side pre-completion logic (logging, redirects, rewrites); formerly Middleware.
  • Redirect: URL-to-URL forwarding via next.config.js, Proxy, or redirect().
  • Request-time APIs: cookies(), headers(), searchParams, draftMode() — opt a component into dynamic rendering.
  • Runtime rendering: see Dynamic rendering.
  • Revalidation: cache update, time-based (cacheLife()) or on-demand (cacheTag() + updateTag()); a.k.a. ISR.
  • Rewrite: incoming-path-to-different-destination mapping without changing the browser URL.
  • Route Groups: (folder) parentheses-wrapped folders organizing routes without affecting URL structure.
  • Route Handler: route.js HTTP handler function; Web Request/Response APIs; supports GET/POST/PUT/PATCH/DELETE/HEAD/OPTIONS.
  • Route Segment: one URL path part, defined by an app directory folder.
  • RSC Payload: compact binary rendered-Server-Components-tree representation, with Client Component placeholders and passed props.
  • Server Component: default App Router component type; server-rendered, can fetch data directly, no client JS bundle contribution; cannot use state/browser APIs.
  • Server Action: a Server Function passed as a Client Component prop or bound to a form action.
  • Server Function: async function marked "use server", invokable from Client Components; called Server Action when passed as prop/bound to a form.
  • Static Export: output: 'export' fully static site (HTML/CSS/JS), hostable without a Node.js server.
  • Static rendering: see Prerendering.
  • Static Assets: files served as-is from public.
  • Static Shell: prerendered HTML served immediately; with PPR includes Suspense fallbacks for dynamic content.
  • Streaming: server sends page parts as ready, via loading.js or manual <Suspense>.
  • Suspense boundary: React <Suspense> wrapping async content with fallback UI; in Next.js defines where the static shell ends and streaming begins (enables PPR).
  • Turbopack: default Rust-based bundler for next dev/next build.
  • Tree Shaking: automatic removal of unused code from JS bundles.
  • URL data: params/searchParams and the hooks reading them (usePathname, useSearchParams); varies per link, not per session, so can't be part of a shared App Shell.
  • "use cache" Directive: marks a file/function/component scope as cacheable.
  • "use client" Directive: marks the server/client code boundary; must be the first line of a file.
  • "use server" Directive: marks a function (or all file exports) as a Server Function callable from client code.
  • Version skew: mismatch between an active client's assets/data and a newly deployed server version; handled via deploymentId.

Key Takeaways

  1. "Middleware" is now officially "Proxy" — the glossary entry for Middleware simply redirects to Proxy.
  2. "Revalidation" and "ISR" are treated as synonyms; "Runtime rendering" is a synonym for "Dynamic rendering"; "Static rendering" is a synonym for "Prerendering".
  3. App Shell, Static Shell, and Suspense boundary are tightly coupled PPR/Cache-Components concepts: the shell is what's cacheable/prefetchable, the Suspense boundary is what defines the shell's edge.
  4. Client Cache invalidation has five distinct triggers (revalidateTag, revalidatePath, updateTag, router.refresh, cookies.set/delete) plus a full clear on page refresh.
  5. Request-time APIs (cookies, headers, searchParams, draftMode) are the definitive list of what forces dynamic rendering.

Connects To

  • ch283 edge-runtime: Proxy's runtime context (referenced under Proxy/Middleware).
  • ch284 turbopack-1: full Turbopack reference behind the glossary entry.
  • ch276 implementing-ppr-in-an-adapter: PPR/App Shell/Suspense boundary mechanics in practice.
AnteriorTurbopackPróximoGetting Started