Back to results for “Caching”
Next.js › Caching

What are the main caching layers in the Next.js App Router?

Intermediate

Answer

Next.js caches at several layers, including the fetch request cache which stores data fetching results, the full route cache which stores rendered pages, the router cache on the client which stores recently visited pages for instant back navigation, and the data cache for persisted fetch results across requests.
// Force fresh data on every request
const res = await fetch('https://api.example.com/data', { cache: 'no-store' });

// Cache indefinitely until manually revalidated
const res2 = await fetch('https://api.example.com/data', { cache: 'force-cache' });
Real-world example A weather application uses no-store caching for live temperature data that must always be current, while using force-cache for a static list of supported cities that rarely changes.

Common follow-ups: What is the difference between the data cache and the full route cache?;How long does the client side router cache keep pages before refetching them?