Simple cache busting with Nginx — First published in fullweb.io issue #66

simple-cache-busting-with-nginx.md

Simple cache busting with Nginx

You update your app.js or styles.css, but have a caching of 30 days and none of the clients will get the latest version? 😟

While the best would be to use a build mechanism to generate new filenames on the server, here is how to ensure clients get your last updates:

1. Change the name of the files in the HTML, for example styles.css to styles.123.css

2. Add this cache busting snippet in your nginx conf:

location ~* (.+)\.(?:\d+)\.(js|css)$ {
  try_files $uri $1.$2;
}

The browser won’t know this new CSS file, and so will download it. And nginx will transparently return the right file.

Nginx is clever enough to understand that file is changed base on timestamp and return 200 instead of 304 for cached file.
It works by settings Last-Modified in headers of 304 responce by nginx.

So, actually I don't have similar problem :). Question is how you configured caching. More full description is here:
http://stackoverflow.com/questions/23603023/file-caching-query-string-vs-last-modified

Thanks for your input @lisovskyvlad 👍

A good caching strategy is indeed important. I'll certainly write the next "Tip of the week" about it.

Append a file content hash is more maintainable. Through this, you could force the client to cache a file (with the specific hash) permanently (expire in 1 year). This saves the Last-Modified inquiring overhead.