How does caching work in Next.js and how do you control it?

Next.js 13+ implements aggressive caching at multiple levels. Understanding these layers helps you balance performance with data freshness.

Request Memoization: During a single render, identical fetch requests are deduplicated. If multiple components fetch the same URL, it only runs once. This happens automatically for fetch().

Data Cache: fetch responses are cached persistently across requests and deployments. Control it with: fetch(url, { cache: 'no-store' }) to opt out, or fetch(url, { next: { revalidate: 60 } }) to revalidate after 60 seconds.

Full Route Cache: Static routes are rendered at build time and cached. Pages become dynamic (not cached) when they use dynamic functions like cookies(), headers(), or searchParams, or when you export const dynamic = 'force-dynamic'.

Revalidation refreshes cached data. Time-based revalidation re-fetches after an interval. On-demand revalidation with revalidatePath() or revalidateTag() lets you purge cache when data changes (after form submissions, webhooks).

The mental model: everything is cached by default for speed. Opt into dynamism or shorter revalidation when you need fresher data. In development, caching is disabled by default so you always see fresh data.

Use the Next.js cache debugging tools to understand what's being cached and why your data might be stale.