Browser does not cache assets when cloudflare age exceeds browser TTL

Hi, I’m in the process of deploying a new static site directly to CloudFlare’s edge using Wrangler, and have been having a hard time getting browser caching working correctly.

I’m able to set the Cache-Control header on responses using this statement:

options.cacheControl = {
    browserTTL: 14400,
}

This correctly sets the header on returned assets to cache-control: max-age=14400. However, when that asset is also cached by Cloudflare, Cloudflare’s cache adds an age header on the response, and what I’ve discovered is that if the age of CF’s cache exceeds the browser max-age, the browser doesn’t cache that asset at all. As a result, a vast majority of my static assets are not being cached on the browser.

If I set my options.cacheControl as follows to disable CF’s caching:

options.cacheControl = {
    browserTTL: 14400,
    bypassCache: true,
}

Then the returned resources don’t have an age header, and the browser correctly commits them to cache every time. However, for my actual deployment I’d like to have my assets cached both at the browser for two hours, and also cached on CF’s servers.

Am I correctly understanding what is happening here? How would I go about enabling caching by Cloudflare without preventing the browser from caching the assets?

EDIT:
I also tried lowering the edgeTTL so that Cloudflare’s edge would never report an age that’s longer than the browser Cache-Control, and yet it seems CF isn’t respecting the edgeTTL value like the docs specify. I used the following snippet:

options.cacheControl = {
  browserTTL: 43200,
  edgeTTL: 36000,
  bypassCache: false,
}

And yet the returned value seems to have been cached for longer than I set as the allowed maximum (as specified in edgeTTL), even after clearing the browser’s local cache and explicitly re-requesting it.

image

Any idea what gives?

1 Like

This topic was automatically closed after 30 days. New replies are no longer allowed.