Subsequent Gridsome builds causing 404's with JS assets

Description

I’m running into an issue with a Gridsome site in production, which is being hosted on Netlify, however I would imagine this issue would affect most hosting providers.

Specifically, each time Gridsome builds, new JS assets are generated with new cache-invalidation suffixes. This unfortunately causes issues for users who are already browsing previous versions of the site. When they attempt to browse to a new page, the browser complains that the necessary JS is no longer available (404) and the routing does not occur.

Steps to reproduce

1. Deploy your site to your hosting provider (e.g. Netlify).
2. Visit the site in your browser.
3. Re-deploy your site.
4. Return to your browser and try to browse around your site (without refreshing your browser).
5. Things should fail.

I have also been able to reproduce this locally by running gridsome build successively and using a local web server.

Expected result

The site should gracefully recover, perhaps by doing a page refresh??

Actual result

The site crashes with multiple 404 errors in the console relating to missing JS files.

Environment

Libs:
- @gridsome/cli version: v0.0.9
- gridsome version: v0.6.3

[hjvedvik]

Yes, I’ve done some testing and a simple fix would be to use location.assign(to.fullPath) in router.beforeEach whenever a route component fails to load or a JSON file for a page doesn’t exist. We’ll try to include a fix next time we publish an update 😃

[u12206050]

Just for reference on how I achieved cache busting in vue pwa: vuejs-pwa-cache-busting