Caching stores the result of data fetching or computation to serve future requests faster. Revalidation updates cached data without rebuilding the entire application, ensuring freshness and performance.
By default, fetch requests are not cached. To enable caching, use cache: 'force-cache':
await fetch('https://...', { cache: 'force-cache' })To revalidate data after a specific time, use next.revalidate:
await fetch('https://...', { next: { revalidate: 3600 } })unstable_cache caches the result of async functions like database queries:
const getCachedUser = unstable_cache(
async () => getUserById(userId),
[userId],
{
tags: ['user'],
revalidate: 3600,
}
)You can define tags and revalidation intervals for fine-grained control.
revalidateTag refreshes cache entries by tag. Use 'max' for stale-while-revalidate behavior:
revalidateTag('user', 'max')To tag fetch requests:
await fetch('https://...', { next: { tags: ['user'] } })Or tag unstable_cache functions:
unstable_cache(..., ['user'], { tags: ['user'] })Use revalidatePath to refresh a specific route after a data mutation:
revalidatePath('/profile')updateTag is used in Server Actions to immediately expire cache entries. Ideal for read-your-own-writes scenarios:
updateTag('posts')
updateTag(`post-${post.id}`)Key differences:
With smart caching and targeted revalidation in Next.js, you can optimize performance, serve fresh data quickly, and avoid unnecessary route rebuilds. Tools like unstable_cache, revalidateTag, and updateTag give you precise control over cache behavior and data freshness.