Skip to content

Instantly share code, notes, and snippets.

@nepsilon

nepsilon/simple-cache-busting-with-nginx.md

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.
Download ZIP

Revisions

  1. nepsilon revised this gist Sep 20, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions simple-cache-busting-with-nginx.md
    View file
    Original file line number Diff line number Diff line change
    @@ -5,6 +5,7 @@ You update your `app.js` or `styles.css`, but have a caching of 30 days and none
    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:
    ```nginx
    location ~* (.+)\.(?:\d+)\.(js|css)$ {
  2. nepsilon created this gist Sep 20, 2016.
    15 changes: 15 additions & 0 deletions simple-cache-busting-with-nginx.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,15 @@
    # 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:
    ```nginx
    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.