How to force-refresh browser cache automatically for each React App deployment in 2022?

user_9319419 0
Viewed 420

By default, when a React Application is deployed, the cached version will display, even if changes were made in the new build. This requires the end user to hard-refresh their page (Ctrl+F5) to see new changes. It is not feasible to have a user do this each time.

With the constant upgrades and speed of software evolving, there are many different ways to accomplish this. However, the answers widely vary due to different practices being used each year.

What is the best practice to accomplish this in 2022? Is there a short and easy way to do this?

Edit: I am using the create-react-app project template.

reactjs
1 Answers

This has to do with broswer caching the old pages and not React, to avoid this you need to either force refresh as you mentioned or changing your build strategy with some sort of different file naming, this can be done by using webpack caching here https://webpack.js.org/guides/caching/.

This way your scripts will have different names with each new deployment and the browser will ahve to reload the new scripts when fetching the index.html.

user_67841260
Related