0

I'm developing an application in ReactJS where I quite often push new changes to the the application.

When the users load upp the application they do not always get the newest version of the application causing breaking changes and errors with the express backend I have.

From what I have researched you can invalidate the cache using "cache busting" or a similar method. Although from all the questions I have seen on stackoverflow they have no clear consensus on how to do it, and the latest update was sometime in 2017.

How would one in a modern day ReactJS application invalidate the browsers cache in an efficient and automatic way when deploying?

If it's relevant, I'm using docker and docker-compose to deploy my application

cervyvin
  • 11
  • 2
  • Have you looked into using the [Cache-Control](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) header? – Gandzal Apr 07 '21 at 10:10
  • I have not, but is not that quite low level for a react app? I host it through nginx without any special configurations. – cervyvin Apr 07 '21 at 11:04

1 Answers1

0

There's not one-fits-all solution. Pretty common is adding some random hash to the bundle file, which will cause browser to process the file again from server.

Something like: app.js?v=435893452 instead of app.js. Most modern bundle tools like Webpack can do all of that automatically but it's hard to give you direction without knowing your setup.

mxmtsk
  • 2,915
  • 3
  • 15
  • 38
  • I've created the project using the npx create-react-app in the beginning, if that helps. That webpack would do this automatically was something I was wondering about but could not find. – cervyvin Apr 07 '21 at 11:02