Mastering Next.js 15 Caching
Next.js 15 introduces a revolutionary approach to caching with the new dynamicIO API and use cache directive. These features provide developers with more granular control over caching behavior.
Understanding the New Caching Model
Next.js 15 replaces the previous fetch-based caching system with a more flexible and intuitive approach:
The use cache Directive
The use cache directive allows you to opt-in to caching for specific data-fetching operations:
1import { cache } from 'react';
2
3// This function's results will be cached
4const getUser = cache(async (id) => {
5 const res = await fetch(`https://api.example.com/users/${id}`);
6 return res.json();
7});
8
9export default function UserProfile({ userId }) {
10 const user = getUser(userId);
11 return <div>{user.name}</div>;
12}
13Working with dynamicIO
The dynamicIO API provides fine-grained control over what parts of your application should be static or dynamic:
1import { dynamicIO } from 'next/io';
2
3// This component will be dynamically rendered
4export default dynamicIO(function ProductPrice({ id }) {
5 const price = fetchPrice(id);
6 return <div>${price}</div>;
7});
8Caching Strategies
Cache Tags
Cache tags allow you to invalidate specific cached content without affecting other cached data:
1import { cacheTag } from 'next/cache';
2
3async function fetchProducts() {
4 const res = await fetch('https://api.example.com/products', {
5 next: { tags: ['products'] }
6 });
7 return res.json();
8}
9
10// Later, to invalidate this cached data:
11cacheTag.revalidate('products');
12Time-Based Revalidation
You can set up automatic revalidation based on time:
1import { cache } from 'react';
2
3const getWeather = cache(async (city) => {
4 const res = await fetch(`https://api.weather.com/${city}`, {
5 next: { revalidate: 3600 } // Revalidate every hour
6 });
7 return res.json();
8});
9Performance Optimization Patterns
- Segment Your Cache: Use different cache tags for different types of content
- Hybrid Approach: Combine static generation with strategic dynamic areas
- Preload Data: Use React's
preloadfunction with cached data fetchers - Edge Caching: Deploy to Vercel's Edge Runtime for global caching
Monitoring Cache Performance
Next.js 15 provides enhanced tools for monitoring cache performance:
1// In your Middleware or Server Component
2export function middleware(request) {
3 const cacheStatus = request.headers.get('x-vercel-cache');
4 console.log(`Cache status: ${cacheStatus}`); // HIT, MISS, or STALE
5}
6By leveraging these new caching capabilities, you can build applications that are both dynamic and lightning-fast, providing the best possible user experience.