Netlify ignores cache-control for 304

[luiscastro193]

The default cache-control header has a heavily negative impact on my web app. Content is generated dynamically as you navigate through the app. Images are constantly being reused but without cache they involve a delay which is clearly noticeable.

This slows down navigation a lot and is not acceptable. But it should be ok because you can change the header. So I set this netlify.toml:

[[headers]]
  for = "*"
  
  [headers.values]
    cache-control = "public, max-age=600"

That works like a charm for a while. But after a few minutes Netlify goes back to serving the default header and the annoying experience comes back with it.

Why? How can we solve this?

[luiscastro193]

After a lot of testing I finally found the reason.

Netlify ignores the cache-control header configuration for 304 responses (etag matches) and ALWAYS sends the default one. This is extremely annoying since I already distributed the link though Netlify and it makes the apps look a lot slower…

I need some kind of solution please

[fool]

Hi Luis,

We’re still working on this case in the helpdesk with you and the team will be able to reconsider your results next week when we have some bandwidth. We’ll follow up in community too once we come to some conclusion.

[Dennis]

@luiscastro193, I’ve followed up with in our helpdesk ticket. It looks like our system parses custom headers in a case sensitive way. As a workaround, I have suggested defining the header like so:

Cache-Control = "public, max-age=600"

Can you confirm if this works for you?

[luiscastro193]

It doesn’t: https://sleepy-dubinsky-4ed592.netlify.com/

As always 200 responses are fine but 304 responses go back to the default Cache-Control.

This is the config file: https://github.com/luiscastro193/graph/blob/master/netlify.toml

[Dennis]

Ah ok. It looks like a new issue then. I’ll get that filed as well and will update here if and when we get a fix deployed. Unfortunately, I don’t have a workaround for it at this time.

[MatsLanGoH]

Edit: Actually, checking the page a few minutes after initial deploy, images are flickering again. For some reason, the headers settings in netlify.toml don’t seem to stick for long.

---

I can confirm the same issue with our demo site - currently evaluating Netlify / NetlifyCMS for our company site at https://loving-pasteur-90ee68.netlify.com/

304 responses go back to default Cache-Control, leading to noticeable flickering when navigating between pages that use the same image files.

The issue is jarring when using Firefox, less so when using Chrome.

As a workaround, I’ve added the following settings to my netlify.toml - this removes the flickering, with max-age being short enough to invalidate content quickly.

Ideally, we probably wouldn’t have to use this settings, so adding this comment for future reference and to be kept in the loop regarding updates

[[headers]]
  for = "*.jpg"
  [headers.values]
    Cache-Control = "public, max-age=300"

[[headers]]
  for = "*.png"
  [headers.values]
    Cache-Control = "public, max-age=300"

[luke]

@MatsLanGoH, we appreciate your thoughts on this. We will update this topic if/when the behavior is corrected. Also, please feel free to “watch” this topic (there is a button below) if you want to receive emails about any updates here.

Last but not least, welcome to our community site!

[Rangoli-Software]

Has this been solved? I believe this may be what is affecting me here

Immutable images. How do I specify paths for all images in directory tree in _headers

We have a conventional content website that is deployed on netlify. By design, practically all the assets excepting the HTML files, are immutable. I am trying to configure the headers in netlify.toml to set a longer max-age for all jpg files in the directory tree (dozens of them). I tried the following [[headers]] for = “*.jpg” [headers.values] X-Frame-Options = “DENY” X-XSS-Protection = “1; mode=block” Cache-Control = "public max-age=604800" However, when I look in Chrome Dev Tools for…

[luke]

Hi, @Rangoli-Software.

I replied in the topic you linked to above. I believe the issue you are experiencing is unrelated to the 304 status issue.

The issue filed for the 304 responses not sending custom headers remains open. It is not resolved at this time. (Again, though, I don’t think it is the root cause of the issue you are seeing.)

[dlecan]

A fix for this issue would be appreciated.
For development purpose, we need to totally disable cache management on server-side, but this “304” behaviour breaks our application

Our configuration:

/*
  Cache-Control: no-cache no-store must-revalidate max-age=0

Thank you

[dlecan]

@dlecan

/*
  Cache-Control: no-cache no-store must-revalidate max-age=0

It is much better with , between instructions!

This is working great:

/*
  Cache-Control: no-cache, no-store, must-revalidate, max-age=0

[luke]

Hi, @dlecan. If/when the 304 issue is resolved, we’ll post another update here. (This issue is still open at this time.)

[addoolaghe]

Hey @luke,
Any updates on this issue ? Could this be related behaviour I’m seeing in this thread.

"Uncaught SyntaxError: Unexpected token <" on new build using gatsby JS

I’m experiencing some issues with an error that has already been mentioned in this post : The site is build with GatsbyJS. The Netlify URL is working well and I cannot reproduce the issue. My primary domain is producing the error on certain url for exemple. Some screenshot of the error logs in browser console: [Capture d’écran 2020-04-24 à 12.47.50] The mentioned post suggests two solutions: disabling those hashes (which I don’t think is an option with GatsbyJS) service work…

[Dennis]

Sorry, we don’t have an update yet. However, looking at your thread, it does look to be the same 304 issue so you’ll want to keep an eye on this thread. We’ll update this thread once we’ve resolved the issue. Thank you for your patience.

[salmonspace]

Has this issue been resolved yet?

I have the same caching issue on my site.

The weird thing is, there weren’t any problems with the cache-control header until a few days ago. When I checked it at least 4 days ago (right after the last build), it definitely worked.

The caching issue was discovered exactly 10 minutes ago from now.

This is my netlify.toml:

[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = "*"
    cache-control = "public, max-age=3600"

[hillary]

Hey there, @salmonspace !

Thank you for sharing this with us. Unfortunately, I do not have an update or an ETA on this. As Dennis mentioned above, we will update this thread once the issue is resolved.

Thank you for your patience!

[nirazul]

Hello!

Was this issue already resolved? I have the same (a similar?) issue on my site:

Choose a Viewpoint – Worldmapgenerator

When reloading, the images are always refetched ignoring the cache settings, even when navigating back and forth. I have tried to change the cache headers with the netlify.toml:

[[headers]]
  for = "/images/*"

  [headers.values]
    cache-control = '''
    public,
    s-max-age=604800
    '''

[hrishikesh]

Hi @nirazul,

The issue sadly still exists.

[jasikpark]

I’m interested in this issue as well, since I was troubleshooting why my cache-control headers weren’t working for over an hour; I double-checked whether I was writing my rules correctly in the Netlify Playground, I split out my glob into multiple individual sections, and I added a custom x-does-this-work="true" header on the off-chance it was a problem with cache-control specifically.

But IG it’s just that we need a method to set custom headers per response code?

Would it be possible to borrow from the redirects syntax?

ex:

[[headers]]
  for = "/*"
  status = "304"
  [headers.values]
    Cache-Control = "public, max-age=0, stale-while-revalidate"