From b5b8a16696380d3f6e1f10101a9d460ce437b1d3 Mon Sep 17 00:00:00 2001 From: James Date: Wed, 12 Feb 2025 08:11:03 +0000 Subject: [PATCH 1/3] update cloudflare docs for memory queue --- pages/cloudflare/caching.mdx | 37 ++++++++++++++++++++++++++++++------ pages/cloudflare/index.mdx | 2 +- 2 files changed, 32 insertions(+), 7 deletions(-) diff --git a/pages/cloudflare/caching.mdx b/pages/cloudflare/caching.mdx index 93411f3..1004e35 100644 --- a/pages/cloudflare/caching.mdx +++ b/pages/cloudflare/caching.mdx @@ -9,8 +9,6 @@ By default, all `fetch()` subrequests made in your Next.js app are cached. Refer [The cache persists across deployments](https://nextjs.org/docs/app/building-your-application/caching#data-cache). You are responsible for revalidating/purging this cache. -Note that [Revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) is not yet supported. - Next.js primes the cache at build time. The build time values are serverd by the [Workers Assets](https://developers.cloudflare.com/workers/static-assets/). @@ -19,17 +17,19 @@ Workers KV is eventually consistent, which means that it can take up to 60 secon ### How to enable caching -`@opennextjs/cloudflare` uses [Workers KV](https://developers.cloudflare.com/kv/) as the cache for your Next.js app. Workers KV is [fast](https://blog.cloudflare.com/faster-workers-kv) and uses Cloudflare's [Tiered Cache](https://developers.cloudflare.com/cache/how-to/tiered-cache/) 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. +`@opennextjs/cloudflare` supports multiple caching mechanisms through a project's OpenNext configuration. + +#### Incremental Static Regeneration (ISR) -To enable caching, you must: +The ISR adapter for Cloudflare uses [Workers KV](https://developers.cloudflare.com/kv/) as the cache for your Next.js app. Workers KV is [fast](https://blog.cloudflare.com/faster-workers-kv) and uses Cloudflare's [Tiered Cache](https://developers.cloudflare.com/cache/how-to/tiered-cache/) 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. -#### 1. Create a KV namespace +##### 1. Create a KV namespace ``` npx wrangler@latest kv namespace create ``` -#### 2. Add the KV namespace to your Worker +##### 2. Add the KV namespace to your Worker The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`. @@ -45,3 +45,28 @@ The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`. ] } ``` + +#### 3. Configure the cache + +In your project's OpenNext config, enable the KV cache and set up a queue. + +The memory queue will send revalidation requests to a page when needed, and offers support for de-duplicating requests on a per-isolate basis. + +```ts +// open-next.config.ts +import incrementalCache from "@opennextjs/cloudflare/kv-cache"; +import memoryQueue from "@opennextjs/cloudflare/memory-queue"; + +const config: OpenNextConfig = { + default: { + override: { + // ... + incrementalCache: () => incrementalCache, + queue: () => memoryQueue, + }, + }, + // ... +}; + +export default config; +``` diff --git a/pages/cloudflare/index.mdx b/pages/cloudflare/index.mdx index 07d577f..8cdbca7 100644 --- a/pages/cloudflare/index.mdx +++ b/pages/cloudflare/index.mdx @@ -53,8 +53,8 @@ We will update the list as we progress towards releasing 1.0. - [x] [Image optimization](https://nextjs.org/docs/app/building-your-application/optimizing/images) (you can integrate Cloudflare Images with Next.js by following [this guide](https://developers.cloudflare.com/images/transform-images/integrate-with-frameworks/)) - [x] [Partial Prerendering (PPR)](https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering) - [x] [Pages Router](https://nextjs.org/docs/pages) +- [x] [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) - [ ] [Support for after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental) -- [ ] [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) - [ ] [Composable Caching](https://nextjs.org/blog/composable-caching) (`'use cache'`) is a Next.js 15 feature and not supported yet. We welcome both contributions and feedback! From 88ce0058a1b032213ad7ea824e1462a16e987635 Mon Sep 17 00:00:00 2001 From: James Anderson Date: Wed, 12 Feb 2025 08:23:40 +0000 Subject: [PATCH 2/3] Update pages/cloudflare/caching.mdx --- pages/cloudflare/caching.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/caching.mdx b/pages/cloudflare/caching.mdx index 1004e35..1944edf 100644 --- a/pages/cloudflare/caching.mdx +++ b/pages/cloudflare/caching.mdx @@ -21,7 +21,7 @@ Workers KV is eventually consistent, which means that it can take up to 60 secon #### Incremental Static Regeneration (ISR) -The ISR adapter for Cloudflare uses [Workers KV](https://developers.cloudflare.com/kv/) as the cache for your Next.js app. Workers KV is [fast](https://blog.cloudflare.com/faster-workers-kv) and uses Cloudflare's [Tiered Cache](https://developers.cloudflare.com/cache/how-to/tiered-cache/) 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. +The ISR adapter for Cloudflare uses [Workers KV](https://developers.cloudflare.com/kv/) as the cache for your Next.js app. Workers KV is [fast](https://blog.cloudflare.com/faster-workers-kv) and uses Cloudflare's [Tiered Cache](https://developers.cloudflare.com/cache/how-to/tiered-cache/) 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. Pricing information can be found in the Cloudflare [docs](https://developers.cloudflare.com/workers/platform/pricing/#workers-kv). ##### 1. Create a KV namespace From b932903aae7b9251a6919a368f1d9fe9fe32191e Mon Sep 17 00:00:00 2001 From: James Anderson Date: Wed, 12 Feb 2025 08:23:45 +0000 Subject: [PATCH 3/3] Update pages/cloudflare/caching.mdx --- pages/cloudflare/caching.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/cloudflare/caching.mdx b/pages/cloudflare/caching.mdx index 1944edf..356af4f 100644 --- a/pages/cloudflare/caching.mdx +++ b/pages/cloudflare/caching.mdx @@ -50,7 +50,7 @@ The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`. In your project's OpenNext config, enable the KV cache and set up a queue. -The memory queue will send revalidation requests to a page when needed, and offers support for de-duplicating requests on a per-isolate basis. +The memory queue will send revalidation requests to a page when needed, and offers support for de-duplicating requests on a per-isolate basis. There might still be duplicate requests under high traffic or across regions. ```ts // open-next.config.ts