Skip to content

Commit ee3bb9c

Browse files
benjavicentevicb
andauthored
docs(cloudflare): add static assets caching (#144)
Co-authored-by: Victor Berchet <[email protected]>
1 parent d5cd301 commit ee3bb9c

File tree

2 files changed

+33
-6
lines changed

2 files changed

+33
-6
lines changed

pages/cloudflare/caching.mdx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -212,6 +212,22 @@ For staging, when your site receives low traffic from a single IP, you can repla
212212

213213
### References
214214

215+
#### Static Assets Caching
216+
217+
<Callout type="info">
218+
The worker doesn't run **in front** of static assets, so the `headers` option of `next.config.ts` doesn't
219+
apply to public files (`public`) and immutable build files (like `_next/static`).
220+
</Callout>
221+
222+
By default, Cloudflare [Static Assets headers](https://developers.cloudflare.com/workers/static-assets/headers/#default-headers) use `max-age=0` with `must-revalidate`, allowing the browser to cache assets but with a revalidation request. This is the [same default behavior as the `public` folder on Next.js](https://nextjs.org/docs/app/api-reference/file-conventions/public-folder#caching).
223+
224+
Next.js also generates _immutable_ files that don't change between builds. Those files will also be served from Static Assets. To match the [default cache behavior of immutable assets in Next.js](https://nextjs.org/docs/app/guides/self-hosting#automatic-caching), avoiding unnecessary revalidation requests, add the following header to the [`public/_headers`](https://developers.cloudflare.com/workers/static-assets/headers/#custom-headers) file:
225+
226+
```txt
227+
/_next/static/*
228+
Cache-Control: public,max-age=31536000,immutable
229+
```
230+
215231
#### Incremental Static Regeneration (ISR)
216232

217233
There are 3 storage options for the incremental cache:

pages/cloudflare/get-started.mdx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -138,21 +138,32 @@ Add the following to the scripts field of your `package.json` file:
138138
- `npm run upload`: Builds your app, and then uploads a new [version](https://developers.cloudflare.com/workers/configuration/versions-and-deployments/#versions) of it to Cloudflare.
139139
- `cf-typegen`: Generates a `cloudflare-env.d.ts` file at the root of your project containing [the types for the `env`](https://developers.cloudflare.com/workers/wrangler/commands/#types).
140140

141-
##### 7. Add caching with Cloudflare R2
141+
##### 7. Add Static Asset Caching
142+
143+
Add a `public/_headers` file, with at least the following headers:
144+
145+
```txt
146+
/_next/static/*
147+
Cache-Control: public,max-age=31536000,immutable
148+
```
149+
150+
See the [Static Assets Caching docs](/cloudflare/caching#static-assets-caching) for more information.
151+
152+
##### 8. Add caching with Cloudflare R2
142153

143154
See the [Caching docs](/cloudflare/caching) for information on enabling Next.js caching in your OpenNext project.
144155

145-
##### 8. Remove any `export const runtime = "edge";` if present
156+
##### 9. Remove any `export const runtime = "edge";` if present
146157

147158
Before deploying your app, remove the `export const runtime = "edge";` line from any of your source files.
148159

149160
The edge runtime is not supported yet with `@opennextjs/cloudflare`.
150161

151-
##### 9. Add `.open-next` to `.gitignore`
162+
##### 10. Add `.open-next` to `.gitignore`
152163

153164
You should add `.open-next` to your `.gitignore` file to prevent the build output from being committed to your repository.
154165

155-
##### 10. Remove `@cloudflare/next-on-pages` (if necessary)
166+
##### 11. Remove `@cloudflare/next-on-pages` (if necessary)
156167

157168
If your Next.js app currently uses `@cloudflare/next-on-pages`, you'll want to remove it, and make a few changes.
158169

@@ -166,7 +177,7 @@ This includes:
166177
(those can be replaced with `getCloudflareContext` calls from `@opennextjs/cloudflare`)
167178
- next-on-pages eslint rules set in your Eslint config file
168179

169-
##### 11. Develop locally
180+
##### 12. Develop locally
170181

171182
You can continue to run `next dev` when developing locally.
172183

@@ -194,7 +205,7 @@ After having added the `initOpenNextCloudflareForDev()` call in your Next.js con
194205
In step 3, we also added the `npm run preview`, which allows you to quickly preview your app running locally in the Workers runtime,
195206
rather than in Node.js. This allows you to test changes in the same runtime as your app will run in when deployed to Cloudflare.
196207

197-
##### 12. Deploy to Cloudflare Workers
208+
##### 13. Deploy to Cloudflare Workers
198209

199210
Either deploy via the command line:
200211

0 commit comments

Comments
 (0)