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

Skip to content

Commit c29add0

Browse files
james-elicxjames-elicx
authored
docs(cloudflare): static assets incremental cache (#123)
1 parent 64e949b commit c29add0

File tree

1 file changed

+35
-31
lines changed

1 file changed

+35
-31
lines changed

‎pages/cloudflare/caching.mdx

Lines changed: 35 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -183,36 +183,17 @@ export default defineCloudflareConfig({
183183

184184
#### SSG site
185185

186-
If your site is static, you do not need a Queue nor a Tag Cache. You can also use the `long-lived` mode of the R2 Incremental Cache to make reading from the store faster.
186+
If your site is static, you do not need a Queue nor a Tag Cache. You can use a read-only Workers Static Assets-based incremental cache for the prerendered routes.
187187

188-
<Tabs items={["wrangler.jsonc", "open-next.config.ts"]}>
189-
<Tabs.Tab>
190-
191-
```jsonc
192-
{
193-
"name": "<WORKER_NAME>",
194-
// ...
195-
196-
// R2 incremental cache
197-
"r2_buckets": [
198-
{
199-
"binding": "NEXT_INC_CACHE_R2_BUCKET",
200-
"bucket_name": "<BUCKET_NAME>",
201-
},
202-
],
203-
}
204-
```
205-
206-
</Tabs.Tab>
188+
<Tabs items={["open-next.config.ts"]}>
207189
<Tabs.Tab>
208190

209191
```ts
210192
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
211-
import r2IncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/r2-incremental-cache";
212-
import { withRegionalCache } from "@opennextjs/cloudflare/overrides/incremental-cache/regional-cache";
193+
import staticAssetsIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache";
213194

214195
export default defineCloudflareConfig({
215-
incrementalCache: withRegionalCache(r2IncrementalCache, { mode: "long-lived" }),
196+
incrementalCache: staticAssetsIncrementalCache,
216197
});
217198
```
218199

@@ -227,17 +208,13 @@ For staging, when your site receives low traffic from a single IP, you can repla
227208

228209
#### Incremental Static Regeneration (ISR)
229210

230-
There are 2 storage options for the incremental cache:
211+
There are 3 storage options for the incremental cache:
231212

232213
- **R2 Object Storage:** A [cost-effective](https://developers.cloudflare.com/r2/pricing/) S3-compatible object storage option for large amounts of unstructured data. Data is stored in a single region, meaning cache interactions may be slower - this can be mitigated with a regional cache.
233-
- **Workers KV:** A [fast](https://blog.cloudflare.com/faster-workers-kv) key value store, it 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 build time values are serverd by the [Workers Assets](https://developers.cloudflare.com/workers/static-assets/).
214+
- **Workers KV:** A [fast](https://blog.cloudflare.com/faster-workers-kv) key value store, it 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.
215+
- **Workers Static Assets:** A read-only store for the incremental cache, serving build-time values from [Workers Static Assets](https://developers.cloudflare.com/workers/static-assets/). Revalidation is not supported with this cache.
234216

235-
<Callout>
236-
Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be
237-
reflected globally, when using the default TTL of 60 seconds.
238-
</Callout>
239-
240-
<Tabs items={["R2 Object Storage", "Workers KV"]}>
217+
<Tabs items={["R2 Object Storage", "Workers KV", "Workers Static Assets"]}>
241218
<Tabs.Tab>
242219

243220
##### 1. Create an R2 Bucket
@@ -311,6 +288,11 @@ export default defineCloudflareConfig({
311288
</Tabs.Tab>
312289
<Tabs.Tab>
313290

291+
<Callout>
292+
Workers KV is eventually consistent, which means that it can take up to 60 seconds for updates to be
293+
reflected globally, when using the default TTL of 60 seconds.
294+
</Callout>
295+
314296
**Create a KV namespace**
315297

316298
```sh
@@ -358,6 +340,28 @@ export default defineCloudflareConfig({
358340
});
359341
```
360342

343+
</Tabs.Tab>
344+
345+
<Tabs.Tab>
346+
347+
<Callout>
348+
The Workers Static Assets cache is read-only. Requests that attempt to modify it will be ignored.
349+
</Callout>
350+
351+
**Configure the cache**
352+
353+
In your project's OpenNext config, enable the static assets cache.
354+
355+
```ts
356+
// open-next.config.ts
357+
import { defineCloudflareConfig } from "@opennextjs/cloudflare";
358+
import staticAssetsIncrementalCache from "@opennextjs/cloudflare/overrides/incremental-cache/static-assets-incremental-cache";
359+
360+
export default defineCloudflareConfig({
361+
incrementalCache: staticAssetsIncrementalCache,
362+
});
363+
```
364+
361365
</Tabs.Tab>
362366
</Tabs>
363367

0 commit comments

Comments
 (0)