diff --git a/pages/cloudflare/caching.mdx b/pages/cloudflare/caching.mdx index 356af4f..759cc3b 100644 --- a/pages/cloudflare/caching.mdx +++ b/pages/cloudflare/caching.mdx @@ -40,9 +40,9 @@ The binding name used in your app's worker is `NEXT_CACHE_WORKERS_KV`. "kv_namespaces": [ { "binding": "NEXT_CACHE_WORKERS_KV", - "id": "" - } - ] + "id": "", + }, + ], } ``` @@ -70,3 +70,86 @@ const config: OpenNextConfig = { export default config; ``` + + + + 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. + + +#### On-Demand Revalidation + +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. + +To use on-demand revalidation, you should also follow the [ISR setup steps](#incremental-static-regeneration-isr). + + + If your app **only** uses the pages router, it does not need to have a tag cache and should skip this step. + + +##### 1. Create a D1 database + +The binding name used in your app's worker is `NEXT_CACHE_D1`. + +```jsonc +// wrangler.json +{ + // ... + "d1_databases": [ + { + "binding": "NEXT_CACHE_D1", + "database_id": "", + "database_name": "", + }, + ], +} +``` + +##### 2. Create tables for tag revalidations + +The D1 tag cache requires two tables; one that keeps a record of the tag/path mappings, and another that tracks revalidation times. + +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. + +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. + +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. + +```sh +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)" +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)" +``` + +##### 3. Configure the cache + +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. + +```ts +// open-next.config.ts +import tagCache from "@opennextjs/cloudflare/d1-tag-cache"; +import incrementalCache from "@opennextjs/cloudflare/kv-cache"; +import memoryQueue from "@opennextjs/cloudflare/memory-queue"; + +const config: OpenNextConfig = { + default: { + override: { + // ... + incrementalCache: () => incrementalCache, + queue: () => memoryQueue, + tagCache: () => tagCache, + }, + }, + // ... +}; +``` + +##### 4. Initialise the cache during deployments + +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. + +OpenNext will generate an SQL file during the build that can be used to setup your D1 database. + +```sh +wrangler d1 execute NEXT_CACHE_D1 --file .open-next/cloudflare/cache-assets-manifest.sql +``` + +This should be run as part of each deployment to ensure that the cache is being populated with each build's initial revalidation data. diff --git a/pages/cloudflare/index.mdx b/pages/cloudflare/index.mdx index 8cdbca7..85993f7 100644 --- a/pages/cloudflare/index.mdx +++ b/pages/cloudflare/index.mdx @@ -53,10 +53,12 @@ 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) +- [x] [Incremental Static Regeneration (ISR)](https://nextjs.org/docs/app/building-your-application/data-fetching/incremental-static-regeneration) 1 - [ ] [Support for after](https://nextjs.org/blog/next-15-rc#executing-code-after-a-response-with-nextafter-experimental) - [ ] [Composable Caching](https://nextjs.org/blog/composable-caching) (`'use cache'`) is a Next.js 15 feature and not supported yet. +1 Only the `direct` mode is supported at the moment, and is not suitable for production. + We welcome both contributions and feedback! ### Windows support