Next.js App Router Has Four Separate Caches — Here Is How Each One Works

Next.js App Router uses four distinct caching layers — Request Memoization, Data Cache, Full Route Cache, and Router Cache — each operating in a different context with its own lifetime and invalidation method. Request Memoization automatically deduplicates identical fetch calls within a single server render and disappears once the request ends, while the Data Cache persists across multiple requests and users until a TTL expires or revalidateTag is called. The Full Route Cache stores pre-rendered HTML and React Server Component output for static pages, but a single dynamic function like cookies() or headers() anywhere in a route can silently opt the entire page out of caching. Many common bugs — such as stale data after calling revalidatePath() — occur because developers assume a single unified cache exists, when in reality each layer must be invalidated separately. Understanding all four layers and their interactions is essential for predictable caching behavior, especially after migrating between Next.js versions.