Browser caching not working

Hi,

I have an issue with caching resources in the browser when accessing my Cloudflare domain “mywebsite.pages.dev” by itself or through the one I purchased from Namecheap, “mywebsite.xyz”. The website itself works just fine, but on reload my JS file (bundle.xxx.js) gets reloaded every time. I get " cache-control: public, max-age=0, must-revalidate" in the response header for it. Here’s how it looks in Chrome dev tools: Link. I would want it to store and reuse files from the browser cache for all my files, until I change the hash on that file. Note that the image file gets a 304 response, since Cloudflare servers sent an Etag with it on the first request.

In the overview tab it says “Great news! Cloudflare is now protecting your site”, so I think the DNS settings are all fine.

When checking my site on https://www.giftofspeed.com/cache-checker/, I get this result.

I have a page rule for mywebsite.xyz/ for “cache-everything” by the way.Also, origin cache control is on.

Maybe this is a noob question, but I really want to solve this before I start building my website.

Thanks for any help! Edit: Small text corrections.

If origin Cachcontrol is on it will respect the Cache-Control from your origin and therefore it will ignore the CacheControl from your Dashboard. Beside if you overwrite it with a PageRule.

For Origin Cache-Control please have a read here:

If your PageRule does not contain any Cache-Control settings it will not overwrite the ones from your origin.

If you just added the site to CloudFlare it may can take a while till it propagated to the DNS Service you are using on your end. If you really want to make sure you are using CloudFlare check the header.
Like:
image
or
image

If you see any of them in your respons headers you are using CloudFlare. This sometimes is needed to check as it can take a while untill you local DNS service will recheck the NameServer or your Domain.

Without your actual Domain we can not perform any checks.

1 Like

Does your Chrome Developer Tools have “disable cache” option enabled or disabled?
That is why you would get this response.

Similar in Mozilla Firefox option Disable HTTP cache checkbox when I open Developer Tools.

Not 100% if that is the issue here, but depending if Cloudflare caches your resource JS file, if you setup the Edge Cache TTL and Browser Cache TTL at Cloudflare.

Or, another way is as @M4rt1n posted about “respecting origin cache control” in which cache you have to setup all the needed and wanted cache headers (expiries, cache-control, last-modified, pragma, etag, etc.) at your host/origin server.

1 Like

Thank you for the response! I wasn’t sure if I should post the actual domain (also it looks amateurish since I was just trying stuff so far), but it is feuerborn.xyz and the cloudflare domain is feuerborn.pages.dev.

So I think I understand cache-control for the most part, but not how to actually set it specifically. I can just turn it off or on with a page rule.

Thank you. Since I am (at least for now) only using the cloudflare domain for hosting my site (it’s feuerborn.pages.dev by the way), I don’t know how to actually set any of those headers myself, as all I seem to be able to set are the page rules.

I made sure to set disable-cache in Chrome dev tools according to what I wanted to test :slight_smile:

Dont worry we dont judge here.
In the Dashboard go to:
https://dash.cloudflare.com/caching/configuration
and set your Browser Cache TTL to what you want.


Respect Existing Headers = “origin Cache-Control”
Numbers are selfexplaining.

Then edit your PageRule with Cache Everything and add these parameters:
Browser Cache TTL = desired value
Edge Cache TTL = desired value
Origin Cache-Crontoll = Off

Then (like @fritexvz told):

  1. clear Cache
  2. disable Cache in browser
  3. hard-reload

Then please report back if it worked

1 Like

So far it does not work yet. It still reloads the JS file on every page load (you can quickly check it yourself if you need to…).

These are my settings: link

When I test it I can see the same result, Cache Control (header) is:
cache-control: public, max-age=0, must-revalidate

Have you for sure cleared ALL Caches for this Domain?

Cache you change the PageRule to:
https://feuerborn.xyz/*
or
feuerborn.xyz/*
without the first asterix?

After this clear Cache and make sure the PageRule is activated

1 Like

I tested both renamings, but that didn’t help.

Could the image I posted earlier be somehow relevant? This one. There it still says “cache-control” if I run the check again.

Oh and for the caches, I also test it in a private window.

It actually just shows the header of the HTTP version which is redirecting to HTTPS.

I’m sorry, I can not help you here, hopefully someone with more experience in CloudFlare Pages can help you here, but I anyway will do some researches.

Thank you for your time! I will try some more things by myself and maybe some other suggestions and report back when I find a solution.

This section of the documentation of Cloudflare Pages actually exactly talkes about this:

As much as possible, Pages sets ETag and If-None-Match headers to allow clients to also cache content in their browsers

But not actually stating how to configurate it, which anyway mostly is set up diffrently, depending on which SSG or type of Software you use.

For example if you use HUGO you can configurate it like this:

Ah! Here #2 at “Known Issues”:

Zone configurations are not working (such as running a Workers script in front of your Pages application, using Pages Rules, and enabling “Always HTTPS”).

So your PageRules will not work and ZONE configurations not aswell, at least thats what it states.

2 Likes

Again thank your for all the help. At some point I will look into setting up an origin server own my own, but right now I just wanted to use Cloudflare to get a quick start in trying out a React application :slight_smile:

The other thing you just posted, well, it seems to fit to this case. I was not aware that Pages is in open beta. Maybe it is just a bug.

2 Likes