{"id":6246,"date":"2020-09-18T18:28:42","date_gmt":"2020-09-18T12:58:42","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=6246"},"modified":"2020-09-18T18:28:42","modified_gmt":"2020-09-18T12:58:42","slug":"cache-busting-in-react-js","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/","title":{"rendered":"Cache Busting In React JS"},"content":{"rendered":"

Browser Caching<\/b>:-\u00a0 When the site is loaded on the web browser,\u00a0 the browser caches some resources like- images, JS, CSS locally and when a user visits the site next time browser serves the file from the local cache. Since we do not have control on the user’s browser it is really hard to clear cache from the browser. If we are webpack or other header caching tools it becomes easier to manage, but still, these are not up to the mark.<\/span><\/p>\n

Some points to understand with browser caching –\u00a0<\/span><\/p>\n

    \n
  1. Browsers ignore cache validation if we refresh the site in the same tab, and also if the user opens a new tab there is a chance that the files loaded from the cache even if we clear the cache.<\/span><\/li>\n
  2. If the app is registered with <\/span>Service Worker<\/b>, then the service worker invalidates the cache only if the user opens the site in a new tab. Users will face issues even after registering <\/span>Service Worker<\/b> if we never open the site in a new tab.\u00a0<\/span><\/li>\n<\/ol>\n

    Generally caching helps to load the site. Disable cache is not the right solution, it is also not good because we can not handle browser behaviour. We have to figure out a way to clear the browser or Service Worker cache every time if our app is deployed with a new version.<\/span><\/p>\n

    A simple effective way to handle –<\/b>\u00a0<\/span><\/p>\n

      \n
    • Bundle the app version into the app.<\/span><\/li>\n
    • Generate a new\u00a0 meta.json file with the newer version with each build.<\/span><\/li>\n
    • Fetch meta.json file on-site loads from the server and compare the versions.<\/span><\/li>\n
    • Clear all the saved cache and hard reload the site.<\/span><\/li>\n<\/ul>\n

      Bundle the app version into the app<\/b> –\u00a0<\/span><\/p>\n

      Parse the version from the package.json file during creating build and set this as a global variable, so we can easily check the app version in the browser console as well as to compare with the latest version.<\/span><\/p>\n

      import packageJson from '{root_dir}\/package.json';\r\n\r\nglobal.appVersion = packageVersion.version;<\/pre>\n
      By doing this we can check\u00a0 the app version in the browser console by typing <\/span>appVersion<\/b><\/p>\n
      Generate meta.json file on each build with unique app version-<\/b><\/p>\n
      We need to run a script to generate meta.json file before creating a build.<\/span><\/p>\n
      \/* package.json *\/\r\n\r\n{\r\n\r\n\u00a0\u00a0\u00a0\u00a0\"scripts\": {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"generate-build-version\": \"node generate-build-version\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"prebuild\": \"npm run generate-build-version\",\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ other scripts\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n}<\/pre>\n
      \/* generate-build-version.js *\/\r\n\r\nconst fs = require('fs');\r\n\r\nconst packageJson = require('.\/package.json');\r\n\r\nconst appVersion = packageJson.version;\r\n\r\nconst jsonData = {\r\n\r\n\u00a0\u00a0version: appVersion\r\n\r\n};\r\n\r\nvar jsonContent = JSON.stringify(jsonData);\r\n\r\nfs.writeFile('.\/public\/meta.json', jsonContent, 'utf8', function(err) {\r\n\r\n\u00a0\u00a0if (err) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0console.log('An error occured while writing JSON Object to meta.json');\r\n\r\n\u00a0\u00a0\u00a0\u00a0return console.log(err);\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0console.log('meta.json file has been saved with latest version number');\r\n\r\n});<\/pre>\n
      After deploying the app we can access the meta.json file with the path \/meta.json and we can fetch the JSON as a REST endpoint. It won\u2019t be cached by our browser because our browser does not cache XHR requests. So we will always get the latest app version even if our bundle is cached in the browser.<\/span><\/p>\n
      So if the appVersion in your build is less than from the appVersion in the meta.json file. we know that it\u2019s time to clear the cached file from the browser. For comparing and clearing the cache to follow below code –\u00a0<\/span><\/p>\n
      const checkVersionMismatch = (letestVersion, currentVersion) => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0const letestVersion= letestVersion.split(\/\\.\/g);\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const currentVersion= currentVersion.split(\/\\.\/g);\r\n\r\n\u00a0\u00a0\u00a0\u00a0while (letestVersion.length || currentVersion.length) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const a = Number(letestVersion.shift());\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const b = Number(currentVersion.shift());\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ eslint-disable-next-line no-continue\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (a === b) continue;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ eslint-disable-next-line no-restricted-globals\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return a > b || isNaN(b);\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0return false;\r\n\r\n\u00a0\u00a0};<\/pre>\n
      Fetch meta.json on-site load and compare versions<\/b> –\u00a0<\/span><\/p>\n
      When our app is loaded we need to fetch meta.json and compare the current version with the latest version available on the server.<\/span><\/p>\n
      If there’s a version mismatch clear all the cache and hard reload the site. If no version mismatch found no action required.<\/span><\/p>\n
      Code to create a component to handle this part (clearing cache and reload site ) is below.<\/span><\/p>\n
      import packageJson from '..\/package.json';\r\n\r\nglobal.appVersion = packageJson.version;\r\n\r\nconst checkVersionMismatch = (letestVersion, currentVersion) => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0const letestVersion= letestVersion.split(\/\\.\/g);\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0const currentVersion= currentVersion.split(\/\\.\/g);\r\n\r\n\u00a0\u00a0\u00a0\u00a0while (letestVersion.length || currentVersion.length) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const a = Number(letestVersion.shift());\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const b = Number(currentVersion.shift());\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ eslint-disable-next-line no-continue\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (a === b) continue;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ eslint-disable-next-line no-restricted-globals\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return a > b || isNaN(b);\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0return false;\r\n\r\n\u00a0\u00a0};\r\n\r\n\u00a0\u00a0class HandleCache extends React.Component {\r\n\r\n\u00a0\u00a0\u00a0\u00a0constructor(props) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0super(props);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.state = {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isLoading: true,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0isLatestVersionAvailable: false,\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0clearCacheAndReload: () => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log('Clearing cache and hard reloading...')\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (caches) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ deleting saved cache one by one\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0caches.keys().then(function(names) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0for (let name of names) caches.delete(name);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ after deleting cached data hard reload the site\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0window.location.reload(true);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0};\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0componentDidMount() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0fetch('\/meta.json')\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((response) => response.json())\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.then((meta) => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const latestVersion = meta.version;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const currentVersion = global.appVersion;\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const shouldForceRefresh = checkVersionMismatch(latestVersion, currentVersion);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (shouldForceRefresh) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`New verion - ${latestVersion}. available need to force refresh`);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.setState({ loading: false, isLatestVersion: false });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0console.log(`Already latest version - ${latestVersion}. No refresh required.`);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0this.setState({ loading: false, isLatestVersion: true });\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0});\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0const { isLoading, isLatestVersionAvailable, clearCacheAndReload} = this.state;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return this.props.children({ isLoading, isLatestVersionAvailable, clearCacheAndReload});\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0export default HandleCache;<\/pre>\n
      We can use this HandleCache component to control the app component render\u00a0<\/span><\/p>\n
      import HandleCache from '.\/HandleCache';\r\n\r\nclass App extends Component {\r\n\r\n\u00a0\u00a0\u00a0\u00a0render() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<HandleCache>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0{({ isLoading, isLatestVersionAvailable, clearCacheAndReload}) => {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (isLoading) return null;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if (!isLoading && !isLatestVersionAvailable) {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\/\/ You can decide how and when you want to force reload\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0clearCacheAndReload();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0\u00a0\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0return (\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<div className=\"App-header\">\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<h1>Cache handling - Example<\/h1>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<p>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0App version - <code>v{global.appVersion}<\/code>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/p>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/div>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}}\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/HandleCache>\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\r\n\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n\u00a0\u00a0}\r\n\r\n\u00a0\u00a0export default App;<\/pre>\n
      Force clear cache and hard reload site if there’s a version mismatch<\/b> –<\/span><\/p>\n
      Every time when our app is loaded on the browser we check for the latest version.<\/span><\/p>\n
      And we are going to clear the cache and reload the site depending on the version mismatch.<\/span><\/p>\n
      Note:- <\/b>some time the above approach also fails because in some cases browser caches the meta.json file and if we request for the file meta.json by <\/span>fetch<\/span>(<\/span>‘\/meta.json’<\/span>)<\/span><\/p>\n
      It picks the meta.json file from the browser cache because this file is already cached and according to the browser if the file is already available you don’t need to communicate with the server. At the end, our whole implementation will not come up with the behaviour that we are expecting.<\/span><\/p>\n
      To avoid this problem we need to do some changes in fetching meta.js –\u00a0<\/span><\/p>\n
      fetch(\/meta.json?${new Date().getTime()}, { cache: 'no-cache' })<\/pre>\n
      this change will help to solve the problem.<\/span><\/p>\n
       <\/p>\n","protected":false},"excerpt":{"rendered":"
      Browser Caching:-\u00a0 When the site is loaded on the web browser,\u00a0 the browser caches some resources like- images, JS, CSS locally and when a user visits the site next time browser serves the file from the local cache. Since we do not have control on the user’s browser it is really hard to clear cache […]<\/p>\n","protected":false},"author":1,"featured_media":6251,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257],"tags":[541,14],"class_list":["post-6246","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react","tag-cache-busting-in-react-js","tag-innovationm"],"yoast_head":"\nCache Busting In React JS - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cache Busting In React JS - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"Browser Caching:-\u00a0 When the site is loaded on the web browser,\u00a0 the browser caches some resources like- images, JS, CSS locally and when a user visits the site next time browser serves the file from the local cache. Since we do not have control on the user’s browser it is really hard to clear cache […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-18T12:58:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Cache-Busting.png\" \/>\n\t<meta property=\"og:image:width\" content=\"960\" \/>\n\t<meta property=\"og:image:height\" content=\"540\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Cache Busting In React JS\",\"datePublished\":\"2020-09-18T12:58:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/\"},\"wordCount\":714,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Cache-Busting.png\",\"keywords\":[\"Cache Busting In React JS\",\"InnovationM\"],\"articleSection\":[\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/\",\"name\":\"Cache Busting In React JS - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Cache-Busting.png\",\"datePublished\":\"2020-09-18T12:58:42+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Cache-Busting.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/Cache-Busting.png\",\"width\":960,\"height\":540},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/cache-busting-in-react-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cache Busting In React JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cache Busting In React JS - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/","og_locale":"en_US","og_type":"article","og_title":"Cache Busting In React JS - InnovationM - Blog","og_description":"Browser Caching:-\u00a0 When the site is loaded on the web browser,\u00a0 the browser caches some resources like- images, JS, CSS locally and when a user visits the site next time browser serves the file from the local cache. Since we do not have control on the user’s browser it is really hard to clear cache […]","og_url":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-09-18T12:58:42+00:00","og_image":[{"width":960,"height":540,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Cache-Busting.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Cache Busting In React JS","datePublished":"2020-09-18T12:58:42+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/"},"wordCount":714,"commentCount":0,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Cache-Busting.png","keywords":["Cache Busting In React JS","InnovationM"],"articleSection":["React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/","url":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/","name":"Cache Busting In React JS - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Cache-Busting.png","datePublished":"2020-09-18T12:58:42+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Cache-Busting.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/09\/Cache-Busting.png","width":960,"height":540},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/cache-busting-in-react-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cache Busting In React JS"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=6246"}],"version-history":[{"count":0,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/6246\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/6251"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=6246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=6246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=6246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}