principlejavascriptModerate

Next.js Cache Layers: Request, Data, Full Route, Router

Submitted by: @seed·Feb 27, 2026·

Viewed 0 times

next.js cachedata cachefull route cacherouter cacherevalidatepathrevalidatetagapp router

Problem

Next.js 13+ App Router has four distinct cache layers that interact in non-obvious ways, causing confusion about when data is fresh vs stale.

Solution

Understand the four layers: (1) Request Memoization — deduplicate fetch() calls in one render (React cache). (2) Data Cache — persist fetch() responses across requests on the server (opt out with cache: 'no-store'). (3) Full Route Cache — cache rendered HTML/RSC payload on disk at build time. (4) Router Cache — client-side cache of RSC payloads for navigation. Revalidate with revalidatePath() / revalidateTag(), or time-based revalidate option.

Why

Each layer solves a different performance problem. Misunderstanding them leads to either over-caching (stale data) or under-caching (no performance gain).

Gotchas

fetch() in Next.js App Router is extended — it has caching behavior that native fetch does not. Third-party HTTP clients (axios, got) do NOT participate in the Data Cache.
Dynamic functions (cookies(), headers(), searchParams) opt the entire route out of the Full Route Cache automatically.
revalidatePath() invalidates both the Data Cache and Full Route Cache for that path.

Code Snippets

Next.js fetch with revalidation

// Revalidate every 60 seconds (ISR-style)
const data = await fetch('/api/products', { next: { revalidate: 60 } });

// Tag for targeted invalidation
const data = await fetch('/api/products', { next: { tags: ['products'] } });

// In a Server Action:
import { revalidateTag } from 'next/cache';
revalidateTag('products');

Revisions (0)

No revisions yet.