Caching Strategies
Data cache, full route cache, router cache, and cache invalidation.
Overview
Next.js has multiple caching layers for optimal performance.
Key Concepts
- Data Cache â Cache fetched data across requests
- Full Route Cache â Cache entire routes on server
- Router Cache â Client-side route prefetching
- Revalidation â Time-based or on-demand invalidation
- Cache Tags â Fine-grained cache control
Code Examples
// Data Cache with revalidation
async function getProducts() {
const res = await fetch('https://api.example.com/products', {
next: { revalidate: 3600 } // Cache for 1 hour
});
return res.json();
}
// Cache with tags for selective invalidation
async function getUser(id) {
const res = await fetch(`https://api.example.com/users/${id}`, {
next: { tags: [`user-${id}`, 'users'] }
});
return res.json();
}
// app/api/revalidate/route.js
import { revalidateTag } from 'next/cache';
export async function POST(request) {
const { tag } = await request.json();
revalidateTag(tag);
return Response.json({ revalidated: true });
}
// Force dynamic route (no cache)
async function DynamicPage() {
const data = await fetch('https://api.example.com/data', {
cache: 'no-store' // Always fresh
});
return <div>{data}</div>;
}
// Opt out of full route cache
export const dynamic = 'force-dynamic';
Practice
Implement cache invalidation for a product catalog with different strategies.