Question posted in
Some documentation to get you started can be found here.

React app has to clear browser cache after new deployment – Apache

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.

Tags:

5

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
  3. 0

    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>
    Login or Signup to reply.
  4. 0

    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

    Login or Signup to reply.
  5. 0

    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'>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search