React app has to clear browser cache after new deployment

The usual approach is to add a hash to the script and other assets filenames depending on the time or content. So when before you had script.js now it will be script.[contenthash].js. The content hash will be different every time you change the content of the script.

Now when a user requests the index.html of your app it will reference the script including the individual content hash. If users previously loaded the script.abc123.js and now the index.html references a script.cba321.js the browser will know that it has not previously seen this file and load it. This way users have the current version of your scripts and other assets (js, css, images, ...). For this to work however it is important that users always load the recent version of the index.html.

This approach is not react specific but an universal approach and best practice. It is however used and suggested by create-react-app (see: https://github.com/facebook/create-react-app).

Since it would be quite tedious to do this manually all the time there are a lot of scripts and strategies available to use module bundlers to achieve this goal. E.g. by using WebPack: https://webpack.js.org/guides/caching/

There are other approaches like setting caching response headers for script files, which however I can not recommend in this case.

You have to configure caching policy of your server.

Example for nginx:

location /{     alias /www/your/app/;     try_files $uri $uri/ /index.html;     add_header Cache-Control "no-store, no-cache, must-revalidate";}

You can learn more here https://medium.com/@pratheekhegde/setting-caching-headers-for-a-spa-in-nginx-eb2f75f52441

I personally use below in my development environment for testing

# Never cache these...# HTTP 1.1=>Cache-Control, HTTP 1.0=>pragma and Expires=>proxy# for html,htm,json,js,css as follows<filesMatch "\.(html|htm|json|js|css)$">  FileETag None  <ifModule mod_headers.c>     Header unset ETag     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"     Header set Pragma "no-cache"     Header set Expires "0"  </ifModule></filesMatch>

The server adds ETag header to a response containing a resource being served, and the client caches the resource and remembers its entity tag (the value of ETag).

Other easy way would be using query string, incrementing the querystring each time you make a changes or use some unique string whenever you make changes, example as follows. You don't have to change apache config browser will load respective script.

# first version<script src="path/to/your/app-loader.js?version=1"></script>