React Cache Buster

About the Package

Based on a project originally written by CagriAldemir, this package allows clients to automatically check the new version or git commit hash when a new version is released in the production environment, and if a new version is published, clearing the cache and reload the page. You can find an example project under the example folder.

Installation

npm install react-cache-buster

#or

yarn add react-cache-buster

Usage

Add a new script to package.json

"scripts": {
  #...
  "generate-meta-tag": "node ./node_modules/react-cache-buster/dist/generate-meta-tag.js"
  #...
}

And then, change your build script like below;

"scripts": {
  "build": "yarn generate-meta-tag && react-scripts build"

  #or

  "build": "npm run generate-meta-tag && react-scripts build"
}

The "generate-meta-tag" script command creates a file named "meta.json" under the public folder under the root directory of your project and writes the current package.json version and the current git hash into the created file.

import React from 'react';
import CacheBuster from 'react-cache-buster';
import { version } from '../package.json';
import Loading from './loading';

const App = () => {
  const isProduction = process.env.NODE_ENV === 'production';
  const propertyToCheck = 'version'; // value can be either 'version' or 'hash'
  return (
    <CacheBuster
      currentValue={version or hash}
      propertyToCheck={propertyToCheck}
      isEnabled={isProduction} //If false, the library is disabled.
      isVerboseMode={false} //If true, the library writes verbose logs to console.
      loadingComponent={<Loading />} //If not pass, nothing appears at the time of new version check.
    >

      //Your actual root component...

    </CacheBuster>
  );
};

export default App;

You can now build and go on production as before.

The process works as follows;

• When you run the build script, the "generate-meta-tag" script writes the current package.json version and current git hash into meta.json and then the build process continues.
• When the client opens the website, the CacheBuster component makes a request to the "/meta.json" file (with cache-busting querystring variable) located in the root.
• Although the website is initially loaded via cache, the updated version data is obtained through the request since XHR requests are not kept in the cache.
• Then, the current version of the cached project is compared with the version received over the request.
• If the logic determines that a cache refresh is needed based on what is configured, either the version or git hash, the whole cache is deleted and the project is reloaded.

Contact

Original Author Twitter: @CagriAldemir

Original Author Mail: [email protected]

License

MIT © CagriAldemir