Next.js Caching & ISR
Next.js has two main caching workflows. Both require setup to work properly anywhere besides Vercel.
- CDN level caching via the
stale-while-revalidate
caching header - Server level caching via the internal Next.js cache
Setup
CDN level caching
CloudFront natively supports the stale-while-revalidate
cache-control header, but by default, Next.js does not conform to the HTTP specification for the header.
To fix, add this to next.config.js
experimental: {
swrDelta: 31536000
}
Server level caching
By default, Next.js uses a local file system cache. This will work for only a single instance. If you have multiple instances running, then you need to configure a custom cache handler. This will enable a shared cache across all your server instances.
We recommend using Redis as the cache provider. Flightcontrol has a ElastiCache Redis service type, so you can easily add Redis to your project.
See Vercel's documentation and guides to set this up: