Next.js Caching & ISR

Next.js has two main caching workflows. Both require setup to work properly anywhere besides Vercel.

1. CDN level caching via the stale-while-revalidate caching header
2. 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:

• Configuring caching for production deployment
• Custom cache handler reference documentation
• Example cache handler with Redis