Next.js Four-Layer Caching Model Explained: How Each Cache Works and Why It Matters

Next.js uses four distinct caching mechanisms — request memoization, data cache, full route cache, and router cache — each operating at a different scope and lifetime. Request memoization deduplicates identical fetch calls within a single server render pass and resets once the response is sent. The data cache persists fetch responses across multiple server requests until explicitly revalidated, while the full route cache stores prerendered HTML generated at build time. The router cache retains client-side navigation payloads for 30 seconds on dynamic routes and up to 5 minutes on static ones. Treating these four layers as a single system is the root cause of stale-data bugs and performance issues in many Next.js applications.