Script Valley
Next.js: Full-Stack React Applications
Performance, Optimization, and DeploymentLesson 6.4

How Next.js caching works and how to control it

Request Memoization, Data Cache, Full Route Cache, Router Cache, revalidate, cache tags, unstable_noStore, force-dynamic, caching layers overview

The Four Caching Layers

Next.js has four distinct caches. Understanding them prevents subtle bugs where you expect fresh data but get stale data.

Request Memoization — deduplicates identical fetch calls within a single server render. Automatic, per-request, cleared after rendering.

Data Cache — persists fetch results across requests and deployments. Controlled by cache and next.revalidate options on fetch.

Full Route Cache — stores rendered HTML and RSC payloads on the server. Routes are cached at build time if they're static.

Router Cache — client-side cache of visited routes for instant back-navigation.

// Opt an entire route into dynamic (no Full Route Cache)
export const dynamic = 'force-dynamic'

// Revalidate a route every 3600 seconds
export const revalidate = 3600

// Opt a single fetch out of Data Cache
import { unstable_noStore as noStore } from 'next/cache'
export async function getData() {
  noStore()
  return fetch('/api/data').then(r => r.json())
}

Most caching bugs come from not knowing which layer is stale. If a Server Action mutation doesn't seem to take effect, check: did you call revalidatePath or revalidateTag? Is the route marked force-dynamic?

Up next

How to deploy a Next.js application to Vercel

Sign in to track progress