Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 656a332

Browse files
james-elicxjames-elicx
authored
cloudflare: update ISR support (#66)
1 parent 5284312 commit 656a332

File tree

2 files changed

+89
-4
lines changed

2 files changed

+89
-4
lines changed

‎pages/cloudflare/caching.mdx

Lines changed: 86 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,9 @@ The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`.
4040
"kv_namespaces": [
4141
{
4242
"binding": "NEXT_CACHE_WORKERS_KV",
43-
"id": "<BINDING_ID>"
44-
}
45-
]
43+
"id": "<BINDING_ID>",
44+
},
45+
],
4646
}
4747
```
4848

@@ -70,3 +70,86 @@ const config: OpenNextConfig = {
7070

7171
export default config;
7272
```
73+
74+
75+
<Callout>
76+
The `direct` mode for the queue is intended for debugging purposes and is not recommended for use in production. We are actively working on a solution that will be suitable for production.
77+
</Callout>
78+
79+
#### On-Demand Revalidation
80+
81+
The tag revalidation mechanism uses a [Cloudflare D1](https://developers.cloudflare.com/d1/) database as its backing store for information about tags, paths, and revalidation times.
82+
83+
To use on-demand revalidation, you should also follow the [ISR setup steps](#incremental-static-regeneration-isr).
84+
85+
<Callout>
86+
If your app **only** uses the pages router, it does not need to have a tag cache and should skip this step.
87+
</Callout>
88+
89+
##### 1. Create a D1 database
90+
91+
The binding name used in your app's worker is `NEXT_CACHE_D1`.
92+
93+
```jsonc
94+
// wrangler.json
95+
{
96+
// ...
97+
"d1_databases": [
98+
{
99+
"binding": "NEXT_CACHE_D1",
100+
"database_id": "<DATABASE_ID>",
101+
"database_name": "<DATABASE_NAME>",
102+
},
103+
],
104+
}
105+
```
106+
107+
##### 2. Create tables for tag revalidations
108+
109+
The D1 tag cache requires two tables; one that keeps a record of the tag/path mappings, and another that tracks revalidation times.
110+
111+
For the tag mappings, the default table name is `tags`, and can be configured by setting the `NEXT_CACHE_D1_TAGS_TABLE` environment variable to a string.
112+
113+
For the revalidation times, the default table name is `revalidations` and can be configured by setting the `NEXT_CACHE_D1_REVALIDATIONS_TABLE` environment variable to a string.
114+
115+
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.
116+
117+
```sh
118+
wrangler d1 execute NEXT_CACHE_D1 --command "CREATE TABLE IF NOT EXISTS tags (tag TEXT NOT NULL, path TEXT NOT NULL, UNIQUE(tag, path) ON CONFLICT REPLACE)"
119+
wrangler d1 execute NEXT_CACHE_D1 --command "CREATE TABLE IF NOT EXISTS revalidations (tag TEXT NOT NULL, revalidatedAt INTEGER NOT NULL, UNIQUE(tag) ON CONFLICT REPLACE)"
120+
```
121+
122+
##### 3. Configure the cache
123+
124+
In your project's OpenNext config, enable the KV cache and set up a queue. The queue will send a revalidation request to a page when needed, but it will not dedupe requests.
125+
126+
```ts
127+
// open-next.config.ts
128+
import tagCache from "@opennextjs/cloudflare/d1-tag-cache";
129+
import incrementalCache from "@opennextjs/cloudflare/kv-cache";
130+
import memoryQueue from "@opennextjs/cloudflare/memory-queue";
131+
132+
const config: OpenNextConfig = {
133+
default: {
134+
override: {
135+
// ...
136+
incrementalCache: () => incrementalCache,
137+
queue: () => memoryQueue,
138+
tagCache: () => tagCache,
139+
},
140+
},
141+
// ...
142+
};
143+
```
144+
145+
##### 4. Initialise the cache during deployments
146+
147+
In order for the cache to be properly initialised with the build-time revalidation data, you need to setup a command that runs as part of your deploy step.
148+
149+
OpenNext will generate an SQL file during the build that can be used to setup your D1 database.
150+
151+
```sh
152+
wrangler d1 execute NEXT_CACHE_D1 --file .open-next/cloudflare/cache-assets-manifest.sql
153+
```
154+
155+
This should be run as part of each deployment to ensure that the cache is being populated with each build's initial revalidation data.

‎pages/cloudflare/index.mdx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,12 @@ 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)
56+
- [x] [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) <sup>1</sup>
5757
- [ ] [Support for after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental)
5858
- [ ] [Composable Caching](https://nextjs.org/blog/composable-caching) (`'use cache'`) is a Next.js 15 feature and not supported yet.
5959

60+
<sup>1</sup> Only the `direct` mode is supported at the moment, and is not suitable for production.
61+
6062
We welcome both contributions and feedback!
6163

6264
### Windows support

0 commit comments

Comments
 (0)