How to safely cache HTML which could point to stale resources

I currently have the default Cloudflare setup which caches JS, CSS, images, etc…

I am thinking of using Cloudflare to cache HTML pages, too. Here is the problem:

My HTML payload references a JS file (ex. index.abc123.js).

When I deploy a change on my origin server, the JS file changes (ex. index.def456.js). Future HTML payloads will reference this new JS file.

If Cloudflare serves my cached HTML payload, it will try to fetch index.abc123.js. If this is in the cache, all is good. But if it has expired from cache, it will hit my origin server and will get a 404.

Since each resource (HTML, CSS, JS, etc…) is cached in the CDN independently of each other with different TTLs, how do I guard against the above scenario?

Thanks,

To clarify, Cloudflare’s “Purge Everything” feature will solve this issue, but that will defeat the point of the effort. We have multiple deploys a day and each deploy cache-busts some linked resources. I am looking for other solutions.

You could add some API calls to your deployment script. For each HTML file that’s updated, purge that URL from Cloudflare.

https://api.cloudflare.com/#zone-purge-files-by-url

Ah I should have clarified this. This is not an option for me because we have a lot of dynamic URLs (ex. user profile pages, etc…) And every dynamic URL will point to the new JS file (this is a pretty common setup in JS-driven sites built on React, Angular, et al).

Don’t delete the old file?

1 Like

If you can’t generate a list of all those dynamic URLs to feed into the API, you’re just going to have to Purge Everything.

Ok, thanks for the fast responses. Options seem to be: keep old files or purge paths (individually or all at once) at each deploy.

It would be really cool if Cloudflare had an option to cache HTML and the linked static assets as a single entity. The HTML payload would only be returned if all the things in that entity are in the edge cache. Otherwise, HTML is fetched from origin. I bet there are some complications which I am overlooking…

Thanks for building Cloudflare.

2 Likes

We do support purge by cache tag for our Enterprise customers, which allows you to tag related / linked assets and purge them by tag name(s).

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