Next.js Has Four Caching Layers — Here Is How Each One Works

Next.js introduced a multi-layered caching architecture alongside the App Router, which has left many developers confused about why their data appears stale after updates. The system operates across four distinct tiers: Request Memoization, the Data Cache, the Full Route Cache, and the client-side Router Cache. Each layer serves a different purpose, ranging from deduplicating fetch calls within a single render to storing pre-rendered HTML across deployments. Developers can control caching behavior using fetch configuration options such as no-store, force-cache, or time-based revalidation via the revalidate field. For on-demand invalidation in enterprise apps, Next.js Server Actions can be used to bust the Data Cache and Full Route Cache immediately after a user submits updated data.