CODEWITHSUNDEEP
reactjs
Kelden Mayer
Kelden Mayer

Reputation: 154

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

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.

Upvotes: 9

Views: 16900

Answers (1)

frisky5
frisky5

Reputation: 39

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.

Upvotes: 1

Related Questions