React app has to clear browser cache after new deployment

Question

We are deploying our React application on the apache server using the Jenkins pipeline. When we deploy new codes, most of the new features work fine but not for all changes reflect the latest in the browser. Users have to open an incognito window or clear cache to see the new feature.

I have seen a few solutions related to angular applications But anything specific to React application, I do not see anywhere. During the build time, Can we add something that will automatically serve the latest changes for end-user? I guess, Cache busting is required But how can we do without a lot of modification in the code, as the above solution did for Angular app.

score 29 · Answer 1 · answered May 21 '20 at 13:02

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.

Didn't work for me, every time when deployment is done I am not getting the latest bundle file. after doing hard refresh in chrome (ctrl + shift + R). My new code is loading — Abhi, Apr 20 '21 at 11:46
Make sure that index.html is not cached and that the asses are hashed. You can check if caching works as expected if developer tools. — realAlexBarge, Apr 21 '21 at 16:18
@realAlexBarge do we have package to do this like hashing script name on it's own — hu7sy, Jan 20 '22 at 06:07
This functionality is already integrated in create-react-app and can be added to any project with a module bundle script like WebPack - see references above. — realAlexBarge, Jan 25 '22 at 13:27

vicacid · Answer 2 · 2020-09-17T08:32:16.967

3

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

edited Sep 17 '20 at 08:32

answered May 22 '20 at 20:54

vicacid

509
4
6

Also, it will be great if you can explain how to clear cache specific to particular page in the website vs overall website (if technically feasible) – shyam Sep 15 '20 at 05:49

score 2 · Answer 3 · answered May 25 '20 at 09:51

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>

@sakina Yes true, its easy if you don't have access to modify confs — Akshay Hegde, Jul 05 '21 at 11:24

score 0 · Answer 4 · answered May 29 '21 at 09:31

I added time with chunkhash in my webpack config. This solved my problem of invalidating cache on each deployment. Also we need to take care that index.html/ asset.manifest is not cached both in your CDN or browser. Config of chunk name in webpack config will look like this:-

fileName: [chunkhash]-${Date.now()}.js

or If you are using contenthash then

fileName: [contenthash]-${Date.now()}.js

score 0 · Answer 5 · answered Jul 20 '22 at 15:02

I had the same problem with my app and I solved clearing the cache (or to be more precise, no-caching).

To do that, just add meta tags inside the "head" tab to make sure that the content of the page isn't cached.

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

React app has to clear browser cache after new deployment

5 Answers5