Caching

@opennextjs/cloudflare supports caching (opens in a new tab).

By default, all fetch() subrequests made in your Next.js app are cached. Refer to the Next.js documentation (opens in a new tab) for information about how to disable caching for an individual subrequest, or for an entire route.

The cache persists across deployments (opens in a new tab). You are responsible for revalidating/purging this cache.

Note that Revalidating (opens in a new tab) is not yet supported.

Next.js primes the cache at build time. The build time values are serverd by the Workers Assets (opens in a new tab).

💡

Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be reflected globally, when using the default TTL of 60 seconds.

How to enable caching

@opennextjs/cloudflare uses Workers KV (opens in a new tab) as the cache for your Next.js app. Workers KV is fast (opens in a new tab) and uses Cloudflare's Tiered Cache (opens in a new tab) to increase cache hit rates. When you write cached data to Workers KV, you write to storage that can be read by any Cloudflare location. This means your app can fetch data, cache it in KV, and then subsequent requests anywhere around the world can read from this cache.

To enable caching, you must:

1. Create a KV namespace

npx wrangler@latest kv namespace create <YOUR_NAMESPACE_NAME>

2. Add the KV namespace to your Worker

The binding name used in your app's worker is NEXT_CACHE_WORKERS_KV.

// wrangler.json
{
  // ...
  "kv_namespaces": [
    {
      "binding": "NEXT_CACHE_WORKERS_KV",
      "id": "<BINDING_ID>"
    }
  ]
}