Next.js 16 introduces Cache Components — the most significant shift in Next.js rendering since Server Components first arrived. This guide covers everything you need to know about the new 'use cache' directive, cacheLife profiles, and the three revalidation APIs.
Why Cache Components?
Before Next.js 16, caching was scattered across route segment config options like export const dynamic, export const revalidate, and export const fetchCache. The new Cache Components replace all of these with a single "use cache" directive that gives you explicit, granular control.
The "use cache" Directive
The simplest way to cache a function in Next.js 16:
"use cache"
function getData() {
return fetch('/api/data').then(r => r.json());
}This automatically caches the function's output. The cached version is reused across requests until invalidated.
Cache Life Profiles
Control how long cached data lasts:
"use cache" { cache: "short" }
async function getLatestPosts() {
const posts = await db.query('SELECT * FROM posts LIMIT 10');
return posts;
}Profile options: short (minutes), medium (hours), long (days), or custom durations.
Cache Revalidation APIs
Next.js 16 provides three distinct APIs for cache invalidation:
- revalidateTag() — Invalidate entries by tag (use with fetch)
- revalidatePath() — Invalidate all entries under a path
- refresh() — Refresh uncached data in Server Actions
Migration from Older APIs
If you're upgrading from Next.js 14 or 15, here's the cheat sheet:
export const revalidate = 60→ Use"use cache" { cache: "short" }export const dynamic = 'force-static'→ Use"use cache"- Fetch with
next: { revalidate: 60 }→ Use cache tags + revalidateTag()
Key Takeaways
- Cache Components use a single "use cache" directive
- Three revalidation APIs for different scenarios
- Enable in config:
experimental: { cacheComponents: true } - Works with Partial Prerendering for instant navigation