Skip to content

Instantly share code, notes, and snippets.

@nepsilon
Created September 20, 2016 03:39
Show Gist options
  • Save nepsilon/62c51c4e5d1eb6e20a2e9663dbfa782f to your computer and use it in GitHub Desktop.
Save nepsilon/62c51c4e5d1eb6e20a2e9663dbfa782f to your computer and use it in GitHub Desktop.
Simple cache busting with Nginx — First published in fullweb.io issue #66

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.

@lisovskyvlad
Copy link

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

@nepsilon
Copy link
Author

Thanks for your input @lisovskyvlad 👍

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

@joesonw
Copy link

joesonw commented Nov 1, 2016

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment