Caching

@opennextjs/cloudflare supports caching (opens in a new tab) and revalidating (opens in a new tab) data returned by subrequests you make in your app by calling fetch() (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.

💡

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 will be NEXT_CACHE_WORKERS_KV by default. This is configurable and can be changed by setting the __OPENNEXT_KV_BINDING_NAME build-time environment variable.

[[kv_namespaces]]
binding = "NEXT_CACHE_WORKERS_KV"
id = "<YOUR_NAMESPACE_ID>"