Search code examples
http-headerscache-controlnetlify

Netlify Headers Cache Control For Static Assets

Is it possible to have Cache Control but only for static assets like image, font, css and js?

Here's my workaround

[[headers]]
  for = "/*" # This defines which paths this specific [[headers]] block will cover.
  [headers.values]
    Cache-Control = "public, max-age=604800"

it preety much works but not as I expected. The site seems to use the old version even when I updating the content.

Solution

  • You've now said that the browser should cache every file, including index.html, for a week, for anyone who has visited your site. So, you'll see the old copy of your site for that long.

    This is probably not what you want. A better way to do it is to create several header rules, one for each type:

    [[headers]]
  for = "*.js" # js files should be set this way
  [headers.values]
    Cache-Control = "public, max-age=604800"
[[headers]]
  for = "*.css" # css files too
  [headers.values]
    Cache-Control = "public, max-age=604800"

    However, you may not want to do even this. Netlify sets the caching very intentionally to max-age of 0 but it does allow content to be cached AND enables atomic rollbacks and deploys. Here's the details about that: https://www.netlify.com/blog/2017/02/23/better-living-through-caching/