Caching of static sites - serves old content when updated

I have an issue with Cloudflare Workers and static sites. The issue is when I deploy new updates to my static sites, the hashes of JS&CSS includes are changed, but the “initial” page that the user loads might not be; so it references files that no longer exist on the server.

My question is: How can I force Cloudflare to serve a fresh copy, and not a cached html file, after I have pushed changes / ran “wrangler publish”?

I want to avoid users seeing the old page, after I have pushed new updates.

You can make an API call to purge the cache.

Hey @sdayman! Thanks for Your reply. Does that also purges the browser cache / Worker cache when a visitor hits the frontend?

You can’t clear a user’s browser cache. That was set in an an HTTP cache header from when they viewed the page. If that’s a problem, then you need to lower the browse cache TTL in the header.

@sdayman I see. So I guess I would set a wildcard page rule to browser cache assets (.JS, images, .CSS) for as long as possible, since their filenames are versioned (by hashed strings) and then set the clouddlare worker to only edge cache all other files. Then I could purge the cache on each deploy?

Best regards

@sdayman I tried removing any Page Rules involving Browser Cache, and then purging the whole cloudflare cache. I still get:

cache-control: max-age=8640000

I now tried to set the browserTTL: null in my worker script, despite as far as I can read it should already be null as default.

Would you know anywhere else that could set this header?

Aha, @sdayman so it seems if I set the edgeCacheTTL, the browser will also cache it for the same duration. So the question is: how do I set the edge(i.e. cloudflare) to cache it indefinitely, and then the browser NOT to cache it? This way I can clear cloudflare cache on new deploys and not worry about browser cache ttl.

I’m offline today, but how about setting browser cache to its lowest setting?

OK @sdayman. If I set the browser cache ttl in cloudflare workers to “0”, it seems to adapt th edgeCacheTTL setting. If I set it to “null” it sets it to around 30 days. If I create a PageRule to set browser cache ttl to “30 minutes” it does not modify the cache-control header, despite I’m clearing the cloudflare cache. I’m testing using cURL requests.

Then it sounds like your source is setting browser cache. Cloudflare won’t decrease that setting. If you need help tracking this down, opening a ticket should help:

Login to Cloudflare and then contact Cloudflare Support by clicking on the Get More Help button.