So we’re serving an SPA and thus I want to make sure that the root document is never cached by the browser.
My idea was to set up a Cache Rule that would match on any URI path not containing a ‘.’ and then bypass the cache and override the Browser TTL to no cache.
I assumed that would make sure that the client is served with a cache-control: no-cache response header, but as far I can see, nothing really happens and the browser keep caching the files as usual.
Can someone help me understand what is happening here?
And you’re right. I set up a similar Cache Rule and the effect was the expected. How are you testing this? Try testing with curl instead of a browser.
Also, Cloudflare does not cache HTML by default, so you wouldn’t need this rule unless you have another rule to cache HTML. In this case, make sure your. bypass rule is placed in the right order.
So I’m not really concerned about the Cloudflare cache since, as you said, HTML isn’t cached anyway by default. The problem is that I need to explicitly set the Cache-Control response header, because if left out the browser will apply its default caching rules, which means sometimes loading the document from disk (which is a disaster for an SPA). So in other words, it’s the browser cache, not the CF cache that I’m having problem with.
When you tested it, did it actually set the Cache-Control header? In my case, it sets the expected CF headers (dynamic caching and whatnot), but doesn’t include the Cache-Control header at all no matter what I set the Browser TTL field to.
As a side note, I want to point out that I eventually managed to solve the actual caching issue by using a Transform Rule with the same condition as above to manually set the header. That said, I’m still interested in understanding why I can’t do the same thing with a Cache Rule.
I wonder if this old documented limitation (refers to Page Rules) still applies to Cache Rules:
Nevertheless, the value you set via Page Rule will be ignored if Cache-Control: max-age is higher. In other words, you can override to make browsers cache longer than Cloudflare’s edge but not less. Browser Cache TTL · Cloudflare Cache (CDN) docs
But I tried several combinations of rule order (the one that sets Cache Eligible for the HTML pages, with the one you are suggesting to override origin Cache-Control) and even different Browser TTL settings, such as override to increase the time or decrease the time (but still cache), and nothing worked as far as changing the Cache-Control set by the origin.
I was going to suggest Transform Rules as a workaround, and I’m glad you’ve already tested it. So, for the while, use TR while I’ll pass that on to Cloudflare Team for further investigation.
