Static GitHub Issues

[345] Cached version of nuxt in client's browser

prev: Error - google-analytics - The client-side rendered virtual DOM tree is not matching..
next: Google Cloud Deployment

Hello, thank you for nuxt, I have an enhancement suggestion.

Story: websites have Expires Headers, let's assume on average of one month. Sometimes those static files need to be updated, changed, etc.

Problem: If a client has those cached files in his browser, the only way to make one's browser to load a new version of the static files with Expiry Headers set on before the expiration date set in one's browser is to change the URL of those files.

What we, as devs, have to do now: to safely update a website, we would have to set the expiry headers to 0, if using nginx by doing something like this: add_header Cache-Control no-cache;, then we would need to wait for the time of our Expiry Headers to make sure there won't be anyone who opens a website before some of the files in one's browser get expired. Only then, we would be able to update the website and set the Expiry Headers again. We could also change the URLs manually inside .nuxt folder, by changing the names and fixing routes in files' contents.

Offered solution: In production, nuxt should look for existing files on build and if the new files will have the same name as the old files, the new files should be, for example: 'oldFileName' + 1. So every time a build happens in production, it changes the name of let's say _nuxt/style.css to _nuxt/style1.css, deleting the old one style.css, then to style2.css and etc. To refresh the count, a developer would just need to delete the .nuxt folder, so there is no files to compare to and make the build again.

Result: it would allow us to forget about cached files in our clients' browsers, because the changed URLs of those files would make them to load a new file as was needed, preserving the Expiry Headers set in our servers' configurations.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c301">#c301</a>)</em></sub></div>