Skip to content

Commit 365f3b3

Browse files
committed
update isr support
1 parent c7be49c commit 365f3b3

File tree

2 files changed

+83
-6
lines changed

2 files changed

+83
-6
lines changed

pages/cloudflare/caching.mdx

Lines changed: 82 additions & 5 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,22 @@ 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+
23+
#### Incremental Static Regeneration (ISR) and Fetch Caching
24+
25+
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.
2326

2427
To enable caching, you must:
2528

26-
#### 1. Create a KV namespace
29+
##### 1. Create a KV namespace
2730

2831
```
2932
npx wrangler@latest kv namespace create <YOUR_NAMESPACE_NAME>
3033
```
3134

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

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

@@ -45,3 +48,77 @@ The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`.
4548
]
4649
}
4750
```
51+
52+
##### 3. Configure the cache
53+
54+
In your project's OpenNext config, enable the KV cache and set up a queue. The `direct` queue will send a revalidation request to a page when needed, but it will not dedupe requests.
55+
56+
```ts
57+
// open-next.config.ts
58+
import incrementalCache from "@opennextjs/cloudflare/kvCache";
59+
60+
const config: OpenNextConfig = {
61+
default: {
62+
override: {
63+
// ...
64+
incrementalCache: () => incrementalCache,
65+
queue: "direct",
66+
},
67+
},
68+
// ...
69+
};
70+
71+
export default config;
72+
```
73+
74+
#### On-Demand Revalidation
75+
76+
The tag revalidation mechanism uses a [Cloudflare D1](https://developers.cloudflare.com/d1/) adapter as its backing store for information about tags, paths, and revalidation times.
77+
78+
To use on-demand revalidation, you should also follow the ISR setup steps.
79+
80+
##### 1. Create a D1 database
81+
82+
The binding name used in your app's worker is `NEXT_CACHE_D1`.
83+
84+
```jsonc
85+
// wrangler.json
86+
{
87+
// ...
88+
"d1_databases": [
89+
{
90+
"binding": "NEXT_CACHE_D1",
91+
"database_id": "<DATABASE_ID>",
92+
"database_name": "<DATABASE_NAME>"
93+
}
94+
]
95+
}
96+
```
97+
98+
##### 2. Create a table for tag revalidation
99+
100+
The default table name is `tags`. This can be configured by setting the `NEXT_CACHE_D1` environment variable to a string.
101+
102+
Wrangler can be used to create a table with it's [execute](https://developers.cloudflare.com/d1/wrangler-commands/#d1-execute) option. Ensure that you create a table for both your local dev database and your remote database.
103+
104+
```sh
105+
wrangler d1 execute NEXT_CACHE_D1 --command "CREATE TABLE IF NOT EXISTS tags (tag TEXT NOT NULL, path TEXT NOT NULL, revalidatedAt INTEGER NOT NULL, UNIQUE(tag, path) ON CONFLICT REPLACE)"
106+
```
107+
108+
##### 3. Configure the cache
109+
110+
In your project's OpenNext config, enable the KV cache and set up a queue. The `direct` queue will send a revalidation request to a page when needed, but it will not dedupe requests.
111+
112+
```ts
113+
// open-next.config.ts
114+
import tagCache from "@opennextjs/cloudflare/d1-tag-cache";
115+
116+
const config: OpenNextConfig = {
117+
default: {
118+
override: {
119+
// ...
120+
tagCache: () => tagCache,
121+
},
122+
},
123+
// ...
124+
};

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)