Updating a website served with a large max-age

Question

I have a SPA website (VueJS) that I've begun updating on a daily basis. When I was new to the entire process, I borrowed bits and pieces of my nginx configuration from multiple sources and ended up serving all the files in my website with Cache-Control: max-age=31536000.

After having users complain that they're unable to find my recent changes, I've inclined to think that it may be due to the browser caching everything till 2037 :(. This hypothesis is supported by the fact that following my advice of CTRL+F5 fixed their issue.

I have since updated the website different cache rules, but the browser doesn't seem to be hitting my server to fetch these newer rules.

map $sent_http_content_type $expires {
        default                         off;
        text/html                       off;
        text/css                        off;
        application/javascript          off;
        application/x-javascript        off;
}

...
server {
    ...
    location / {
        add_header Cache-Control 'no-cache, must-revalidate, proxy-revalidate, max-age=0';
        ...
    }
}

Is there any way to undo this? Do I have to pack up and move to another domain?

Answer 1

If you have had far future Cache-Control lifetime set for all pages, and have a solid user base who were visiting your site when it was effective... then the short answer is: YES.

There is no way to undo use of browser cache as it will not check for new cache policy before currenly cached assets (your pages also, in this case) will not expire..

But you can just account for the fact that people tend to change browsers, run OS optimizer (which clear caches), or have an email campaign for users you know to instruct them to clear browser caches.

Not a good situation any way you look at it.

Answer 2

The setting that seem to work for me is the following using map is the following and I don't need to setup no-cache header any where else.

  server {
            add_header X-Frame-Options SAMEORIGIN always;
            add_header X-XSS-Protection "1; mode=block";
            add_header X-Content-Type-Options "nosniff";
            add_header Strict-Transport-Security "max-age=31536000; includeSubdomains;";
    
            expires $expires;
    ...
    }
    
map $sent_http_content_type $expires {
    default                     off;
    "text/html"                 epoch;
    "text/html; charset=utf-8"  epoch;
    "text/css"                  epoch;
    "application/javascript"    epoch;
    "~image/"                   max;
}

This guide has help understand. https://www.digitalocean.com/community/tutorials/how-to-implement-browser-caching-with-nginx-s-header-module-on-ubuntu-16-04