What best solution for prevent browser cache file in react - reactjs

Question

My problem is
when I deploy new version react web to production
some user browser display old version from previous deploy
My user have to press ctrl+f5 for clear cache browser then I think which bad solution
please suggest best solution for me thx bro.

Answer 1

This could be because your web server is setting a cache control response header, which is set to a large value. Could you check the value in devtools?
A simple explanation of what cache control does is it tells the browser that the browser can use the cached resource upto n minutes. So only after n minutes will the browser send a new request for the resource.
Since you have a react app (a web app), the browser requests for index.html, and it will subsequently fetch the js bundle for your react app.
When you push an updated version, the browser doesn't know that there is an update. Since the index.html was cached, it continues to use it. Until the cache time expires, and then it will fetch again and this time it will get the latest js bundle.
Based on your server, you will need to figure out how to set the cache-control header for index.html to be of value no-cache. Here is an example of how I set it up in firebase hosting,
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
},
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"headers": [
{
"source": "/service-worker.js",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
},
{
"source": "/index.html",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
},
{
"source": "/static/**/*",
"headers": [
{
"key": "Cache-Control",
"value": "max-age=31536000"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Since create react app automatically configures the webpack build to generate static files with different hashes in the filename, it is fine to set a large cache value for it.

Answer 2

That occurs because, by default, the service workers do cache, so you should check your react project index.js file and check to see if services workers are registered. serviceWorker.register().
If it is registered then Unregister the service worker serviceWorker.unregister().
The above being quite drastic as a method, since it could affect your user experience what is recommended is that you configure your PWA to suit your particular caching needs. Follow this resource "https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker" for more about playing with service workers.
In case you need caching for your application, your backend sends appropriate response headers.