CODEWITHSUNDEEP
reactjswebcaching
Nut Fergie
Nut Fergie

Reputation: 89

What best solution for prevent browser cache file in react

My problem is when I deploy new version react web to production some user browser display old version from previous deploy My user have to press ctrl+f5 for clear cache browser then I think which bad solution please suggest best solution for me thx bro.

Upvotes: 0

Views: 8112

Answers (2)

NGUM BUKA FON NYUYDZE
NGUM BUKA FON NYUYDZE

Reputation: 119

That occurs because, by default, the service workers do cache, so you should check your react project index.js file and check to see if services workers are registered. serviceWorker.register().

If it is registered then Unregister the service worker serviceWorker.unregister().

The above being quite drastic as a method, since it could affect your user experience what is recommended is that you configure your PWA to suit your particular caching needs. Follow this resource "https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker" for more about playing with service workers.

In case you need caching for your application, your backend sends appropriate response headers.

Upvotes: 0

Kenny John Jacob
Kenny John Jacob

Reputation: 1198

This could be because your web server is setting a cache control response header, which is set to a large value. Could you check the value in devtools?

cache-control sample

A simple explanation of what cache control does is it tells the browser that the browser can use the cached resource upto n minutes. So only after n minutes will the browser send a new request for the resource.

Since you have a react app (a web app), the browser requests for index.html, and it will subsequently fetch the js bundle for your react app.

When you push an updated version, the browser doesn't know that there is an update. Since the index.html was cached, it continues to use it. Until the cache time expires, and then it will fetch again and this time it will get the latest js bundle.

Based on your server, you will need to figure out how to set the cache-control header for index.html to be of value no-cache. Here is an example of how I set it up in firebase hosting,

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint",
      "npm --prefix \"$RESOURCE_DIR\" run build"
    ]
  },
  "hosting": {
    "public": "build",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "headers": [
      {
        "source": "/service-worker.js",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      },
      {
        "source": "/index.html",
        "headers": [{ "key": "Cache-Control", "value": "no-cache" }]
      },
      {
        "source": "/static/**/*",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=31536000"
          }
        ]
      }
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Since create react app automatically configures the webpack build to generate static files with different hashes in the filename, it is fine to set a large cache value for it.

Upvotes: 2

Related Questions