Cache issue on Netlify?

Hi @gilesbutler!

This problem mostly impacts sites that make heavy use of code-splitting in their frontend and have visitors staying a long time. We even ran into it on app.netlify.com which is also running on Netlify.
I think why it happens is pretty clear from the thread.

There are a few ways this problem can be solved. These can be combined.

Enforce the usage of the currently loaded deploy when people load the page

If you want to make sure that on loading the entrypoint html site for your app, people will only access the files of a single specific deploy, it is best to use the unique deploy url.

It might look like this: https://5e85abb1a640d40006504f77--cms-demo.netlify.com/
You get them by clicking on the timestamp on a finished deploy in the deploy overview.

This url will always point to the same set of files - remember: Netlify deploys are atomic.
If you now start to use this URL to reference any Javascript entrypoint for your app, you should not experience files disappearing while people still have your app open.

You can automate this using the DEPLOY_URL environment variable in your build.
Depending on your build setup you should be able to inject a value from an environment variable.
Your final script tag might look like this after inserting the env var:

<script src="https://5e85abb1a640d40006504f77--cms-demo.netlify.com/js/main.js></script>

Prompt visitors to reload the page if your app was updated

Many larger apps sometimes give you a notification that you should reload the page to get a new version of an app. You could implement the same for your app.

The key to this is service workers. Browsers can check for updates in service workers and notify your client-side javascript if there is a newer version available. There is a great article about the service worker lifecycle.
You should be able find resources about how to enable a service worker for your app. If you only want to use the service worker for the notification and not for offline caching, you might need to update the settings to disable local caching.

2 Likes

Hey @marcus, that’s super helpful thank you.

I’ll take a look at both of those options and figure out the best path forward.

If I come across anything useful I’ll post it back here for others in the future.

Thanks

1 Like

This issue is not solved. I am opening a new thread here to discuss my own specific issue with caching, URL rewrites and deploying via Netlify CLI:

Hi, @netlfynoob.

This might be jumping to conclusions as we have been debugging on the other topic and already found issues there that could explain this. We will keep debugging in the other topic and we can post an update here if there is actually a cache issue.