Force browser to clean cache in react

Question

Trying to use Cache Busting Technique to clear the cache for each release. Used new Date().getTime() or Hash() method to create a unique version value and append the version value after the file path.

This should apply the version number to the main.js file from the build directory, so I don't have to add the version number to all js and CSS files.

1.

<link style="stylesheet" href={'main.css?v=${value}'}/>

<script src={'main.js?v=${value}'} />

Answer 1

In react, you can use third-party library such as react-cache-buster for Cache Busting. This library allows clients to automatically check the new version when a new version is released in the production environment, and if a new version is published, clearing the cache and reload the page.

For example:

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';
  return (
    <CacheBuster
      currentVersion={version}
      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.
      metaFileDirectory={'.'} //If public assets are hosted somewhere other than root on your server.
    >

      // Your actual root component...

    </CacheBuster>
  );
};

export default App;

To learn more, see https://www.npmjs.com/package/react-cache-buster