Cloudflare Developers•2w ago

setting `max-age` headers to served assets is not getting applied

I'm using React Router 7 and, in the past, I could control the TTL of any given asset with a _headers file located at the output location for my production files _headers file

/favicon.ico
  Cache-Control: public, max-age=3600, s-maxage=3600
/assets/*
  Cache-Control: public, max-age=31536000, immutable

/favicon.ico
  Cache-Control: public, max-age=3600, s-maxage=3600
/assets/*
  Cache-Control: public, max-age=31536000, immutable

this is not possible anymore. How can i archive the same functionality whichout too much assle? the AI is telling me to write a whole other Worker just to handle assets, but I don't want to deviate too much on how React Router recommends things to do please help, it shouldn't be this hard to control this. Basically manipulating the CDN aspect of Cloudflare has become increasingly harder

9 Replies

niconiahiOP•2w ago

the recommendation from AI is instead of having this

assets = { directory = "./build/client/" }

assets = { directory = "./build/client/" }

have this

workers = {
  "asset-worker" = "path/to/asset-worker.ts"
}

[[routes]]
pattern = "yourdomain.com/build/client/*"
worker = "asset-worker"

[[routes]]
pattern = "yourdomain.com/*"
worker = "main"

workers = {
  "asset-worker" = "path/to/asset-worker.ts"
}

[[routes]]
pattern = "yourdomain.com/build/client/*"
worker = "asset-worker"

[[routes]]
pattern = "yourdomain.com/*"
worker = "main"

seems kind of OK but do i really have to do this to be in control? I wish there was a wrangler.toml config like

[[assets]]
headers = { max_age = 6000 }

[[assets]]
headers = { max_age = 6000 }

that seems super reasonable

Hello, I’m Allie!•2w ago

Assets doesn’t yet support setting headers, so you would need to use a Rule, Worker, or a Snippet to apply them

niconiahiOP•2w ago

i'm interested in the Worker approach. Is the above explanation correct on how to approach it?

Hello, I’m Allie!•2w ago

That looks like some very weird hallucination You could have the Asset Worker also apply the headers, but that would mean using a Workers Request for every incoming request, even if you don’t actually need to change any headers You could also just split it off into a separate Worker, which is what I think it was trying to suggest, though it would have to be two separate configs, as you can’t configure multiple Workers from a single config file

niconiahiOP•2w ago

what would you do? i'm not a fan of many options. I want a time-consuming option which is optimal. I'm not looking for quick solutions but resilient which makes the flow of the code least magical. The one solution which is more custom but more control which one would you choose in said case?

Hello, I’m Allie!•2w ago

I would probably keep it all in a single Worker. That is the simplest case, but can also cost you a little bit, depending on how many requests your Worker gets

niconiahiOP•2w ago

sorry but i still don't get how can i control the caching times. I've tried a rule (see image). This is frustrating because it should work (it doesn't) I don't understand the other 2 options. How and where can i read about this Asset Worker that you mention? or is it just a Worker that happens to serve the assets and that's what you meant? the thing is that Cloudflare will automatically bypass any Worker if the requested path matches a static asset, so it won't go through any Worker, isn't that the case?

Hard@Work•2w ago

Yeah, by Assets Worker, I mean the Worker which is serving the assets. To run it before Assets are served, you can do this:

{
  // ... Other config
  "assets": {
    "directory": "./build/client/"
    "run_worker_first": true,
  }
}

{
  // ... Other config
  "assets": {
    "directory": "./build/client/"
    "run_worker_first": true,
  }
}

niconiahiOP•2w ago

marvelous! thanks !! are there any plans on making the manipulation of max-age a simple configuration through the wrangler config file? and one last thing: is my Caching Rule correctly configured?? what do you think? this is an example asset full URI https://morfar.app/assets/index-0i6kkekp.js

Gaming

Programming

setting `max-age` headers to served assets is not getting applied

Did you find this page helpful?