How does Next.js caching work in the App Router?

Next.js App Router has a multi-layer caching system: 1. Request Memoization (in-memory, per-render): React deduplicates identical fetch() calls made during a single render tree traversal. If two Server Components call fetch("/api/user"), only one HTTP request is made. Duration: single server request, then cleared. 2. Data Cache (persistent, server-side): Next.js extends fetch with a server-side data cache. fetch("...", { cache: "force-cache" }) caches the response across requests and deployments until manually revalidated. { cache: "no-store" } skips cache. { next: { revalidate: 60 } } revalidates every 60 seconds. Cache persisted across requests, shared between users. 3. Full Route Cache (server-side, static): statically rendered routes are cached as HTML+RSC payload on the server at build time (or at first request). Persists across deployments if not revalidated. 4. Router Cache (client-side): the client stores visited route segments in memory. Avoids re-fetching Server Component data when navigating back. Duration: 30 seconds for pages, 5 minutes for layouts (default, configurable). Opting out: export const dynamic = "force-dynamic" — makes route fully dynamic. noStore() from next/cache — opt a data fetch out of cache. Revalidating: revalidatePath("/blog") or revalidateTag("posts") in Server Actions or Route Handlers. cookies() and headers(): using these functions in a Server Component automatically opts it into dynamic rendering (can't be cached since they depend on the request).