Skip to content

Commit b4b3113

Browse files
authored
update cloudflare docs for memory queue (#74)
1 parent f5312a4 commit b4b3113

File tree

2 files changed

+32
-7
lines changed

2 files changed

+32
-7
lines changed

pages/cloudflare/caching.mdx

Lines changed: 31 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ By default, all `fetch()` subrequests made in your Next.js app are cached. Refer
99

1010
[The cache persists across deployments](https://nextjs.org/docs/app/building-your-application/caching#data-cache). You are responsible for revalidating/purging this cache.
1111

12-
Note that [Revalidating](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#revalidating-data) is not yet supported.
13-
1412
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/).
1513

1614
<Callout>
@@ -19,17 +17,19 @@ Workers KV is eventually consistent, which means that it can take up to 60 secon
1917

2018
### How to enable caching
2119

22-
`@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.
20+
`@opennextjs/cloudflare` supports multiple caching mechanisms through a project's OpenNext configuration.
21+
22+
#### Incremental Static Regeneration (ISR)
2323

24-
To enable caching, you must:
24+
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).
2525

26-
#### 1. Create a KV namespace
26+
##### 1. Create a KV namespace
2727

2828
```
2929
npx wrangler@latest kv namespace create <YOUR_NAMESPACE_NAME>
3030
```
3131

32-
#### 2. Add the KV namespace to your Worker
32+
##### 2. Add the KV namespace to your Worker
3333

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

@@ -45,3 +45,28 @@ The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`.
4545
]
4646
}
4747
```
48+
49+
#### 3. Configure the cache
50+
51+
In your project's OpenNext config, enable the KV cache and set up a queue.
52+
53+
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.
54+
55+
```ts
56+
// open-next.config.ts
57+
import incrementalCache from "@opennextjs/cloudflare/kv-cache";
58+
import memoryQueue from "@opennextjs/cloudflare/memory-queue";
59+
60+
const config: OpenNextConfig = {
61+
default: {
62+
override: {
63+
// ...
64+
incrementalCache: () => incrementalCache,
65+
queue: () => memoryQueue,
66+
},
67+
},
68+
// ...
69+
};
70+
71+
export default config;
72+
```

pages/cloudflare/index.mdx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ We will update the list as we progress towards releasing 1.0.
5353
- [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/))
5454
- [x] [Partial Prerendering (PPR)](https://nextjs.org/docs/app/building-your-application/rendering/partial-prerendering)
5555
- [x] [Pages Router](https://nextjs.org/docs/pages)
56+
- [x] [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration)
5657
- [ ] [Support for after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental)
57-
- [ ] [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration)
5858
- [ ] [Composable Caching](https://nextjs.org/blog/composable-caching) (`'use cache'`) is a Next.js 15 feature and not supported yet.
5959

6060
We welcome both contributions and feedback!

0 commit comments

Comments
 (0)