I'm trying to get cache headers working for images loaded with custom loader which utilizes the defa

I'm trying to get cache headers working for images loaded with custom loader which utilizes the default Cloudflare Image Optimization implementation. These files are served from the public folder (

public/images

public/images

public/images

public/images) which by default gets no cache (

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate

public, max-age=0, must-revalidate) and so the optimizer serves them with this header as well.

I've tried to add the following config settings:

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

{
  async headers() {
    return [
      {
        source: '/cdn-cgi/image/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
      {
        source: '/images/(.*)', // does not work
        headers: [
          {
            key: 'cache-control',
            value: 'public, max-age=14400',
          },
        ],
      },
    ];
  },
  images: {
    minimumCacheTTL: 3600, // this does nothing
    loader: 'custom',
    loaderFile: './imageLoader.js',
  },
}

I also tried adding them to

_headers

_headers

_headers

_headers file in the root of the project but they don't seem to get included in the final build.

Only way I've been able to get cache headers working for these files is by modifying

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers

./.vercel/output/static/_headers after the build by adding this to the end of the generated file:

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

/images/*
  cache-control: public,max-age=3600

Am I missing something or is this the only way to get cache headers working for these images?

Tommerty•4/21/24, 10:55 AM

Hey there

I currently have a website on Vercel and the main reason we chose Vercel was due to how easy it was to set up a multi tenant system (we allow our "Pro" users to attach a domain to their profile and it's as simple as letting them point either a root domain to the Vercel IP, or a CNAME to their subdomain (username.website.com)).

I'd like for us to move back to Cloudflare tbh, as I have never been a big fan of Vercels pricing model (even before the recent changes), but I'm stuck at a loss of understanding how we could set something like this up on Cloudflare, as it's quite confusing regarding the "edge certs/client certs/custom hostnames/origin server etc.

Is there any documentation/posts/resources to help point me in the right direction? Right now the routing is just going through the middleware.ts and Vercel pretty much take care of the rest.

TIA!

neoney•4/21/24, 11:55 AM

I believe all you need is a CNAME pointed to your pages subdomain and adding the domain in the project's settings

neoney•4/21/24, 11:55 AM

You can add it using the API too

neoney•4/21/24, 11:55 AM

There's a limit of 500 I believe, and no wildcard support yet

neoney•4/21/24, 11:55 AM

You could get around that using a worker to proxy it

Tommerty•4/21/24, 4:55 PM

Thanks, will investigate! I assumed I'd need to sort out the whole cloudflare for saas and all this complicated stuff

bun•4/21/24, 5:16 PM

i have connection timeouts with no logs

bun•4/21/24, 5:23 PM

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

$ next dev --turbo
/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:29573
            throw a;
            ^

TypeError: fetch failed
    at fetch (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:17033:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127790:22)
    at async getBoundRegisteredWorkers (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:127810:29)
    at async getMiniflareOptionsFromConfig (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173117:29)
    at async getPlatformProxy (/Users/user/app/node_modules/wrangler/wrangler-dist/cli.js:173089:28)
    at async setupDevPlatform (/Users/user/app/node_modules/@cloudflare/next-on-pages/dist/next-dev/index.cjs:183:23)
    at async file:///Users/user/app/apps/web/next.config.mjs:4:3 {

bun•4/21/24, 5:23 PM

on next 14.2

@che•4/21/24, 9:15 PM

Does anyone here know if No Access will be supported with next-on-pages? Recommend https://developers.cloudflare.com/workers/runtime-apis/bindings/rate-limit/ is updated to indicated rate limiting isn't currently working with pages. It works locally for me but fails on deploy, have been informed via ^rate limiting beta channel it's due to the way .toml is handled and there is no rate limiting setting within page settings

Bbun ``` $ next dev --turbo /Users/user/app/node_modules/wrangler/wrangler-dist/cli.j...

makisuo•4/21/24, 10:51 PM

having this issue too randomly after hot reloading.

FelDev•4/22/24, 1:59 PM

Is Vercel dropping support for Edge rendering going to affect next-on-pages?
https://twitter.com/leeerob/status/1780705942734331983

Lee Robinson (@leeerob) on X

So, @vercel reverted all edge rendering back to Node.js

Wanted to correct the record here as it's something I've advocated for in the past, and share what I've learned since then.

Also, the "edge" naming has been a bit confusing, so let's clear that up here as well.

What is…

Twitter

•

4/17/24, 9:12 PM

FFelDev Is Vercel dropping support for Edge rendering going to affect next-on-pages? htt...

Isaac McFadyen•4/22/24, 3:24 PM

So just keep in mind that this is for vercel.com, not all Vercel sites (which still can and do use edge rendering).

Isaac McFadyen•4/22/24, 3:24 PM

That doesn't mean it won't affect next-on-pages, but just to clarify that tweet.

Isaac McFadyen•4/22/24, 3:25 PM

https://twitter.com/leeerob/status/1780710814560960759

Lee Robinson (@leeerob) on X

@fredkisss @vercel This is about Vercel’s usage of Vercel itself. Not your own site code

Twitter

•

4/17/24, 9:31 PM

FelDev•4/22/24, 3:25 PM

Oh, I totally misinterpreted that tweet

Thanks!

Krstan Popeski•4/22/24, 4:26 PM

Hey guys, I am struggling with 'jose' for JWT signing and verification of tokens. I am writing a Next.JS app for cloudlfare pages, previously I had it statically generated and used Cloudflare's functions as the backend, but since I switched to next-on-pages, the cloudflare functions stopped working, so I had to refactor the entire "backend" to use Next.js API routes instead. The problem here is that once I switched to Next.JS API routes, I had to refactor the cloudflare functions middleware (which was responsible for authorization) into Next.JS API middleware, now after I did that the previously used library: @tsndr/cloudflare-worker-jwt stopped working, so I had to find a new one. The alternative that I found was 'jose' https://www.npmjs.com/package/jose. This is how I am using it to sign and verify a JWT:
Singing:
///////////
const JWT_SECRET = env.JWT_SECRET
const secret = new TextEncoder().encode(JWT_SECRET)
const alg = 'HS256'
const token = await new jose.SignJWT({
id: _id
})
.setProtectedHeader({ alg })
.setIssuedAt()
.setIssuer('urn:test')
.setAudience('urn:test-audience)
.setExpirationTime('15m')
.sign(secret)

Verifying:
///////////
await jose.jwtVerify(token, secret, {
issuer: 'urn:test',
audience: 'urn:test-audience',
})

The token and secret used in the verifying step are the same as in the signing.

The problem I have here is that the verifying fails with this message:
[JWSInvalid: Invalid Compact JWS] {
code: 'ERR_JWS_INVALID',
name: 'JWSInvalid'
}

Even though I try to verify the token immediately after I create it (I try this for debugging purposes).
If someone encountered a similar issue and can help me, I will be very grateful. Thank you and sorry for the long post.

matiasjMusante•4/22/24, 4:32 PM

Hello, I've been trying unsuccessfully to modify the cache behavior in my fetch requests using Next.js (next-on-pages, for example, in route.js:

export const runtime = 'edge'
import { revalidatePath } from 'next/cache'

export async function GET() {
// revalidatePath('/api'); REVALIDATE PATH DOES WORK.
const res = await fetch('https://postgrest-2n44.onrender.com/todos')
const data = await res.json()
return Response.json(data)
}

As you can see in the comments, revalidatePath does update the data obtained through the fetch.

But when I try to include, for example, "native" Next.js options, such as including {"cache: no-store"} in the fetch request, I receive the error:

Error: The 'cache' field on 'RequestInitializerDict' is not implemented. cloudflare

I also tried with headers (cache-control, etc.) and with next: revalidate x.
Am I doing something wrong or misunderstanding something? Thank you very much.

Link to my repo:

https://github.com/matimusss/nextcloudflare

Thanks in advance!!

GitHub

GitHub - matimusss/nextcloudflare

Contribute to matimusss/nextcloudflare development by creating an account on GitHub.

matiasjMusante•4/22/24, 4:33 PM

(the "error" is I cant find the way to opt-out of cache using thos options, only with revalidatePath()

Cat Socks•4/22/24, 5:26 PM

Has anyone successfully implemented next auth v5 with next-on-pages?

CChaika > considering mostly performance If you're considering mostly performance, that...

Pat Branchaud•4/23/24, 3:43 AM

FYI, did some testing today and created a nextjs api route that has access to KV and it’s quite fast ~70ms compared to accessing KV directly in runtime edge page ~50ms

SM•4/23/24, 4:12 AM

Does anyone have pointers for clearing fetch cache properly when hosting a Nextjs (app router with SSR) on Cloudflare? I'm noticing when testing my pages from various locations/browsers that data is often out of sync. I've been using revalidateTagrevalidateTag to clear fetch cache and it works ~80% of the time. I've narrowed the issue down to locations. If you access the web page from a distant location (via VPN) the data is "stuck" on an older version. Almost like the data cache isn't clearing and propagating, so when accessing the page remotely it loads instantly (seemingly via cache) since it doesn't know about fresh data.

I've posted about this in the community forums (https://community.cloudflare.com/t/nextjs-serving-stale-old-fetch-cache-across-network-how-to-clear-cache/646169/2) but thought I'd try here as well.

SSM Does anyone have pointers for clearing fetch cache properly when hosting a Nextj...

matiasjMusante•4/23/24, 9:34 AM

I think you may try with any cache busting technique, so to avoid completely the cache.

"Cache busting is a technique used in web development to ensure that the latest version of a file is fetched from the server, bypassing cached versions. By appending a unique identifier like a version number or timestamp to the file’s URL, the browser treats it as a new resource, fetching the most up-to-date version. This technique prevents users from seeing outdated cached content and improves the overall user experience."

You may, for example, include the timestamp somewhere in the fetch req. so it will be a unique request.

Why are you using revalidateTag? I myself coudnt make options like (cache : "no-store) work, but revalidatePath/revalidateTag, seemed to work... is the same happening to you?

MmatiasjMusante I think you may try with any cache busting technique, so to avoid completely the...

SM•4/23/24, 11:36 AM

I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch new data when cache has been invalidated (via revalidateTagrevalidateTag) and after a stale request has been made. Then, after a fetch, it should cache again. This is standard nextjs functionality and has worked me on Vercel.

Like I said, it's kind of working as expected. But it's not 100% reliable. Old data is appearing in various places (locations/browsers) then getting stuck. So a timestamp won't fix this cos it might make nextjs fetch new data every-time. I don't want that.

I've been using revalidateTagrevalidateTag for years on Vercel. It works great and is a modular way to manage data cache.

The site in question is a news website. Think of it like a blog. You have an index (home) with post titles/summaries, then you have the post pages. What's happening is: a new post is added, I programmatically call revalidateTagrevalidateTag with relevant tags. I then view the page on my browser and refresh it shows the latest post titles on the home page and correct post titles. However, browsers in other locations show old data (even after refresh). And the old data is staying for days. My fetch revalidate is only set to 300300 seconds (5mins).

It's almost like Cloudflare worker/pages aren't spreading data updates across the rays (datacenter's). As though each ray stores it's own instance of .next.next cache. Surely that's not right? Even if it were right, you'd need a way to invalidate cache across all of it, on demand. But I can't find that anywhere.

Sorry to ramble, just hoping I've missed something obvious that's maybe Cloudflare specific.

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

osaOP•4/23/24, 3:03 PM

Are you using the Workers KV for caching? https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/caching.md#workers-kv

Pat Branchaud•4/23/24, 3:08 PM

Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I setupDevBindings like https://github.com/cloudflare/next-on-pages/issues/271 but getRequestContext().env.MY_KV; return empty. Do you have an Idea what I'm doing wrong?

GitHub

[⚡ Feature]: Mocking `process.env.` when running `next dev` · Issue...

Wrangler mocks D1 locally with from this file .wrangler/state/..../db.sqlite So I was thinking it would be possible polymorphically get the binding to query that file when developing using next dev...

PPat Branchaud Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I...

osaOP•4/23/24, 3:40 PM

I think you should define the bindings in

wrangler.toml

wrangler.toml

: https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

Oosa I think you should define the bindings in `wrangler.toml` : https://github.com/c...

Pat Branchaud•4/23/24, 4:49 PM

Thank you, I tried that as well, and doesn't work. Did you manage to make it work?

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

matiasjMusante•4/23/24, 6:19 PM

IF cache busting solves it, you could as well make a custom implementation and call it when/where you need it. I mean, revalidating would give the same effects than creating a "new" fetch (by adding timestamp somewhere, route or headers). Hope someone may explain all this a little bit more or give some clarification/solution (I myself can´t make the cache: no store option to work, and found that only revalidatePath/Tag are the only ways to revalidate a fetch made inside an nextjs project on nexat-on-pages).

NNob I have about 30-40ms

karim•4/23/24, 10:47 PM

The only thing I can think of is that in my page.tsx file I import in a 1mb json file. Could that be whats slowing it down?

karim•4/23/24, 10:47 PM

If not, does anyone else know how to trouble high cpu time? (median is about 150ms for me)

Kkarim The only thing I can think of is that in my page.tsx file I import in a 1mb json...

Nob•4/23/24, 11:53 PM

yes maybe

PPat Branchaud Thank you, I tried that as well, and doesn't work. Did you manage to make it wor...

osaOP•4/24/24, 5:22 AM

Yes, if you want a working example run npm create cloudflare@latestnpm create cloudflare@latest select "Website or web app" and "Next". Uncomment the KV section in

wrangler.toml

wrangler.toml

and app/api/hello/route.tsapp/api/hello/route.ts. start dev server

npm run dev

npm run dev

and visit http://localhost:3000/api/hello . If that works for you, then check that you have all the needed packages and correct versions (

wrangler

wrangler

& @cloudflare/next-on-pages@cloudflare/next-on-pages) etc.

ANBU•4/24/24, 6:40 AM

https://github.com/iflamed/hono-react-ssr-shadcn-ui

Sharing this cool project that I found on Hono discord server
All credits to the author

GitHub

GitHub - iflamed/hono-react-ssr-shadcn-ui: Template code for Honojs...

Template code for Honojs with React SSR and Shadcn-UI which running on Cloudflare Pages. - iflamed/hono-react-ssr-shadcn-ui

andrea_bhweb•4/24/24, 9:23 AM

Was investigating to find out why my site was slow in some pages, then today I finally found out why. For some reason making CF cache resulting pages at the edge (by using a Cache Rule) doesn't play well with page streaming: the page is returned only when Next is done rendering the whole page, so TTFB becomes a second and a half instead of milliseconds. Is this a known issue? Is there a config I can operate to have both CF cache and page streaming when not primed?

Oosa Are you using the Workers KV for caching? https://github.com/cloudflare/next-on-...

SM•4/24/24, 12:26 PM

You are a bloody legend. This fixed every weird cache issue we were facing

Can't thank you enough. I owe you a beer/coffee. Seriously. I think this is important information for Nextjs devs coming from Vercel where distributed, fast caching is the norm, so I've suggested an edit to the framework guide (https://github.com/cloudflare/cloudflare-docs/issues/14231).

GitHub

Issues · cloudflare/cloudflare-docs

Cloudflare’s documentation. Contribute to cloudflare/cloudflare-docs development by creating an account on GitHub.

florent•4/24/24, 4:34 PM

It looks like I cant use React Server Components with Cloudflare Pages and Nextjs right? At least not If I try to use D1. I need to call getRequestContext()getRequestContext() on the edge and I can only set export const runtime = "edge";export const runtime = "edge"; within an api route, right? (Nextjs 14)

Fflorent It looks like I cant use React Server Components with Cloudflare Pages and Nextj...

thipperz•4/24/24, 5:54 PM

that's not true, you can export that const in a layout file and that will affect all pages within it

thipperz•4/24/24, 5:55 PM

actually I do export that const in various places like my D1 functions folder

Tthipperz actually I do export that const in various places like my D1 functions folder

florent•4/24/24, 5:56 PM

do you use use serveruse server within the files in your D1 folder?

and thanks for the hint with the layout, I didn't try that one

Fflorent do you use `use server` within the files in your D1 folder? and thanks for the...

thipperz•4/24/24, 6:11 PM

I only use "use server" for server actions, and I use server actions when I need to fetch or update data from client components. Since I cannot use D1 bindings directly from client components, I use server actions to forward requests to the file that interacts with D1.

Server actions are all exported functions that you have in a file that begins with the "use server" directive, and adding this directive at the top of the file means that you cannot export any other thing except for async functions, not even the "export const runtime = 'edge'" - so they have this limitation, which I believe is intented.

Tthipperz I only use "use server" for server actions, and I use server actions when I need...

florent•4/24/24, 10:31 PM

tysm! I think I didnt understand how all these pieces work together, now I've managed to call my d1 db without any problems. I really really appreciate it your explanation cleared it for me

thipperz•4/24/24, 10:33 PM

I'm glad to be helpful!

Georgi Vatsov•4/25/24, 7:04 AM

Hey! Anyone aware if I could use Cache API (caches.default) in next-on-pages project's middleware file?

mr nooli•4/26/24, 3:03 PM

Hey, a slightly random question, when you get a massive nextjs project w/ cloudflare you end up going over the 10mb limit (especially if there's prisma involved), is it possible to split the worker.js file into multiple fragments to get below this limit? @James

Chaika•4/26/24, 3:04 PM

no, pages bundles it all into a single worker file, and the limit is on that

mr nooli•4/26/24, 3:05 PM

hmmmm kk

mr nooli•4/26/24, 3:06 PM

I mean that's not a limitation for me rn, the limitation is prisma x supabase isn't compatible on the edge yet

but hopefully when/if that happens I'll be back on CF

Varna•4/26/24, 3:15 PM

I made an action updateItem(id, value)updateItem(id, value) that is called in client component via onClick.
In dev (localhost) it works. When deployed to CF, it fails request and returns 404 response with not found html page.
If on first line of action I console.log("updateItem starts")console.log("updateItem starts"), it doesn't even appear on CF logs. And what is strange, on CF logs there are multiple calls to the url (2-6 extra requests on average).

Varna•4/26/24, 3:16 PM

I heard that if action throws in nextjs, then it returns 404 page. But not even a single console.log() being pushed is a bit strange to me.

I'm trying to get cache headers working for images loaded with custom loader which utilizes the defa

Similar Threads