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.

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.