DEV Community

Cache Busting a React App

Dinesh Pandiyan on April 14, 2019

TL;DR - SemVer your app and generate a meta.json file on each build that won't be cached by the browser. Invalidate cache and hard reload the app w...

Read full post

EddyP23 • Apr 15 '19

Hi Dinesh, good article.

I was wondering though, why would you need a cache-invalidation mechanism. We are developing with angular, but I believe, you can setup things in the same way with React.

We have also been struggling with browser caching, because SEO loves resources cached for as long as possible. So here is our current setup:

js and css files all have a hash part in their filename, so we cache them forever (366 days to be precise), but if they change, the filename changes, so no trouble there.
index.html - never cache it. Here we have references to js and css files.
fonts, images - we cache them forever (366 days again), but we version them all. Therefore, when we update them, we just bump up the version and cache invalidation solved.

This way, SEO performance score is happy that we cache everything forever, but also, we never have to deal with invalid data.

I am not trying to sell my approach here, I am just honestly curious what is your use case for such cache invalidation mechanism? Thanks.

Dinesh Pandiyan • Apr 18 '19

Hey Eddy — Good question.

We definitely need to leverage browser and server cache (PWA service worker implementation for cache control is a lot better).

But there are still a few gotchas we haven't solved yet. These "recommended" ways work most of the time but in some rare cases, they won't as I highlighted at the beginning of the post.

So this technique is more of taking control of cache "within your app code" and use this as a fallback approach when all else fails.

We have a peculiar case where I work — safari web app pinned to the home screen and users won't quit it for a few months (restaurant iPads). We simulated native app behavior with PWAs but cache busting instantly after a new deploy was tricky. This technique eventually helped us.

David Villamizar • Oct 21 '19 • Edited

The service worker that comes with react does cause scenarios where the cache is not busted that feel a bit weird. For that reason it was removed from create-react-app a while ago, as discussed here github.com/facebook/create-react-a...

The mechanism @eddyp23 mentions works perfectly and it's supported by default by create-react-app create-react-app.dev/docs/producti...

Jacob Garlick • Dec 14 '20

@eddyp23 I am using React but as you mentioned the two are probably largely the same in terms of setup. I am wondering how you would set up the caching for js and css files, do those have to be individually referenced in index.html?

James Thomson • Apr 15 '19

I think it should be noted the window.location.reload(true) will only disable the cache for the current page. Any subsequent requests (async js/css, other pages, images, etc.) will not be cache busted. It's also very dependant on the browser. Chrome for example hangs on to cache for dear life unless instructed by headers to do otherwise. The best way to ensure cache is busted is to fingerprint filenames based on the files content and to never cache pages (e.g. index) so references remain fresh.

Dinesh Pandiyan • Apr 15 '19 • Edited

James — That's very true. Browsers sometime decide to ignore window.location.reload(true).

But caches.delete() will always delete the cache. So reloading synchronously after cache.delete() should clear the cache for the user.

Matt • Jul 23 '19

You mention reloading synchronously... I was having issues with infinite looping when our app updated and it seems due to window.location.reload firing before our caches had time to clear, in the code you shared for CacheBuster. Simply adding aPromise.all() on the caches.delete() promises solved the issue in our case.

Thank you for taking the time to share this!

a-ssassi-n • Jan 8 '20 • Edited

Hi Matt,

We are facing the same issue, can you please let me know the exact code you have used to solve this issue?

Something like this? Please correct me if I am wrong.

caches.keys().then(async function(names) {
await Promise.all(names.map(name => caches.delete(name)));
});

Matt • Jan 10 '20

Yep, I used promises but that's pretty much exactly what I did, then do the window.location.reload after your await

a-ssassi-n • Jan 14 '20

Thanks, I got it now.

Laura6739 • Jun 4 '20 • Edited

Hi a-ssassi-n,
I'm having the same issue and I tried to do it the same way as this:
refreshCacheAndReload: () => {
if (caches) {
caches.keys().then(async function(names) {
await Promise.all(names.map(name => caches.delete(name)))
})
}
window.location.reload(true)
},
And it keeps happening did I miss something?, can you please give me any guide?

Lukas Vis • Oct 12 '20

if (caches) {
  const names = await caches.keys();
  await Promise.all(names.map(name => caches.delete(name)));
}
window.location.reload();

Kevin Ilsen • Jan 31 '20

This is a really great solution and very well explained in this article! There's just one problem: location.reload(true) is deprecated! Calling location.reload() is still in the spec, but passing true to force the browser to get the page again and bypass the cache is deprecated. And because it's deprecated, some browsers are starting to ignore it. As a result, we are seeing an infinite loop where our browser keeps reloading the same page from cache. Have you thought about an alternative that will achieve the same result?

Rajat Kulshreshtha • Dec 18 '20

Hey, any updates on this?

ammedinap93 • May 28 '20

Hi Dinesh, thanks for the great article. I found it very helpful and I use it for a project my team is working on. At a point, you say: "It won't be cached by the browser as browsers don't cache XHR requests." Well, for some reason my browser is catching it.
I will try
fetch(/meta.json?${new Date().getTime()}, { cache: 'no-cache' })
as @ppbraam suggested dev.to/ppbraam/comment/gdac
If you have any other idea that may help I would appreciate it. Thanks in advance.

Sabike-Raja • Oct 12 '19

Hi Dinesh,
In my case the fetch('/meta.json') does not work. How it will tyake the meta json from public folder.

Pragz • Oct 28 '20

Hi, are you able to figure out meta.json file, I am also facing the same issue ::

Failed to load resource: the server responded with a status of 404 (Not Found)

Cannot GET /meta.json

Brian Gaines • Sep 14 '21

What web server are you fetching from? I noticed the same on IIS as asp.net core protects json and thinks they're a config file so serves up a 404. Changing the file extension to txt (meta.txt) resolved that issue.

Mike Bifulco • Apr 14 '19

This is stellar. Looking forward to giving this a shot. Thank you Dinesh!

David Tinoco • Sep 19 '21 • Edited

Dinesh, how would this work with a functional component? I tried to translate it but it just keeps refreshing over and over. Here is my FC version, using Typescript

import { observer } from "mobx-react";
import React, { useEffect, useState } from "react";
import { useStores } from "../../contexts";

const semverGreaterThan = (versionA: string, versionB: string) => {
    const versionsA = versionA.split(/\./g);
  const versionsB = versionB.split(/\./g);
  while (versionsA.length || versionsB.length) {
    const a = Number(versionsA.shift());
    const b = Number(versionsB.shift());
    if (a === b) continue;
    return a > b || isNaN(b);
  }
  return false;
}

const CacheBuster: React.FC<any> = ({ children }) => {

    const store = useStores();
    const [loading, setLoading] = useState(true);
    const [isLatestVersion, setIsLatestVersion] = useState(false);

    const refreshCacheAndReload =  () => {
      console.log('Clearing cache and hard reloading...')
      if (caches) {
        // Service worker cache should be cleared with caches.delete()
        caches.keys().then(function(names) {
          for (let name of names) caches.delete(name);
        });
      }
       // delete browser cache and hard reload
      window.location.reload();
    };

    useEffect(()=>{
        fetch('/meta.json')
        .then((response) => response.json())
        .then((meta) => {
          const latestVersion = meta.version;
          const shouldForceRefresh = semverGreaterThan(latestVersion, store.appVersion);
          if (shouldForceRefresh) {
            console.log(`We have a new version - ${latestVersion}. Should force refresh`);
            setLoading(false);
            setIsLatestVersion(false);
          } 
          else {
            console.log(`You already have the latest version - ${latestVersion}. No cache refresh needed.`);
            setLoading(false);
            setIsLatestVersion(true);
          }
        })
        .catch(err=>{
            console.log('App could not be loaded. Check if meta.json file has been generated.');
        });
        //eslint-disable-next-line
    }, []);

    return children({ loading, isLatestVersion, refreshCacheAndReload });
}

export default observer(CacheBuster);

Nicolas • Jul 20 '19

Hi Dinesh,

Good work.

I am having an issue when the metal.json version not match package.json version it goes to infinit loop because the meta.json is not updated.

Any suggestion ?

Thanks

Nic

Marcos Correa • Jul 27 '22

I had a same problem. Is this code ever the versions will differents, the package.json version and meta.json version. In this case, how I update the meta.json version after realoading and cleaning cache?

Dinesh Pandiyan • Jul 20 '19

If you could create a sample repo that reproduces the problem I can take a look and see what's happening.

Nicolas • Jul 20 '19

OK I will try.

I also got this error when i manually refresh the page after new version has been updated in server :

service-worker.js:1 Couldn't serve response for http Error: The cached response that was expected is missing.

AmanChaudhary1998 • Jul 9 '21

// While Implementing these code I am stuck into the infinite loop
// can anyone help me to where I am commit the mistake
if (caches) {
const names = await caches.keys();
console.log(names);
await Promise.all(names.map((name)=>caches.delete(name)))
}
window.location.reload();

AmanChaudhary1998 • Jul 9 '21

While Implementing these code I am stuck into the infinite loop
can anyone help me to where I am commit the mistake
if (caches) {
const names = await caches.keys();
console.log(names);
await Promise.all(names.map((name)=>caches.delete(name)))
}
window.location.reload();

AmanChaudhary1998 • Jul 9 '21

<if (caches) {

            const names = await caches.keys();

            console.log(names);

            await Promise.all(names.map((name)=> caches.delete(name)))

        }
        window.location.reload();

These will fall into infinite loop can any one help me how to solve these issue>

AmanChaudhary1998 • Jul 9 '21

if (caches) {

            const names = await caches.keys();

            console.log(names);

            await Promise.all(names.map((name)=> caches.delete(name)))

        }
        window.location.reload();

These will fall into infinite loop can any one help me how to solve these issue

AmanChaudhary1998 • Jul 9 '21

/*While Implementing these code I am stuck into the infinite loop
can anyone help me to where I am commit the mistake */
if (caches) {
const names = await caches.keys();
console.log(names);
await Promise.all(names.map((name)=>caches.delete(name)))
}
window.location.reload();

ppbraam • Oct 11 '19

Thank you for this solution!

If for some reason your cache still won't clear, maybe this will help:

fetch(`/meta.json?${new Date().getTime()}`, { cache: 'no-cache' })

pherm • Jan 26 '20

I have same problem with rca, it don't work well. I always have same meta.jon version, is it normal?

asimhussain • May 23 '20

I am new to caching and as per this article, this solution of deleting a stale cache can be achieved without a refresh? My understanding is EVEN with a refresh, some applications are cached, hence various solutions used to invalidate cache.

In my react app, if I refresh my app, the latest code is reflected. It's only IF the code is not refreshed and I go to another page, nothing is updated.

I am also using react router. Does an internal request need to be made for meta.json then?

Pragz • Oct 27 '20 • Edited

Hi Dinesh, My app is not being created using create-react-app, so Service Worker is missing there, so this approach may not work, but then I am not sure how can I clear the browser cache programmatically for user to see the updates, happy to share more information if any one willing to help, thanks in advance.

sumanyu-soniwal • Sep 29 '20 • Edited

Amazing article. Worked like a charm.

caches.keys().then(async function(names) {
await Promise.all(names.map(name => caches.delete(name)));
});

This helped in the extension of the entire article. Thanks a lot, Dinesh.

bretta99999 • Jun 12 '19

Awesome work Dinesh, this really helped our project fix the caching issues we were having!

Runecreed • Aug 27 '19

Hey Dinesh

Thanks for this article, really helpful and clear, worked like a charm and easily slotted into the build process!

Gabriel Morais • Dec 11 '20 • Edited

"caches" variable? where it came from?

if (caches) {
      const names = await caches.keys();
      await Promise.all(names.map(name => caches.delete(name)));
}

Tom VanAntwerp • Apr 15 '19

How does this compare to using service workers for offline caching?

Dinesh Pandiyan • Apr 18 '19

Leveraging Service workers for controlling your cache should be the de-facto first approach. Service workers are pretty great and hashing every new build is a life saver. But there are situations where we will need custom cache control within the code. This approach will help in such situations.

More info in this comment — dev.to/flexdinesh/comment/a79c

Akshay Ram Vignesh • Apr 14 '19

Just what I was looking for! Thanks Dinesh! 😁

repoman • Apr 15 '19

Nice one Dinesh, thanks for taking the time to prepare this.

Sudhir Kumar • Aug 25 '20

I am facing issues implementing it. My application went into an infinite reloading state. Though I tried using Promise.all as suggested by @a-ssassi-n but it didn't work for. Can anybody help me with this?

Rajat Kulshreshtha • Dec 18 '20

Hey did you get the solution?

Jasim Uddin • Jul 5 '21

After implement this It's calling API without login which is doesn't make sense, is there any solutions?

abdullah727 • Oct 3 '19 • Edited

Hi,
i am facing an issue on production. Unable to access /meta.json endpoint..working fine on local.
getting this error: SyntaxError: Unexpected token < in JSON at position
Regards
Abdullah Saud

Aniketh Nair • Mar 25 '20 • Edited

I had the same issue, this change helped me

fetch('/meta.json',{
headers : {
'Content-Type': 'application/json',
'Accept': 'application/json'
}
})

Shaun Trennery • Jan 20 '20

@abdullah727 Did you ever manage to get the "Unexpected token

abdullah727 • Oct 4 '19

Remember to push your commit with --tag attribute — git push origin master --tags
what does this line means and why it is important?

gloubier • Oct 29 '19

I was wondering the same thing. Is it supposed to change anything?

harsha • Jul 2 '20

it keeps rerendering

Saeed Padyab • May 12 '20 • Edited

Hello Dinesh, amazing article.

jinog268 • Feb 17 '22

I have implemented using the above method. But there was infinite loop refreshing problem. What is the solution for this?

David Tinoco • May 14 '20

Dinesh, how do you handle the meta.json during development, with hotloading?

Ahmad El Harake • Dec 20 '20

Thanks man, I'll try your solution and let you know. Interesting article keep it up!

$yairifrach profile image$

yairIfrach • May 11 '20

Remember to push your commit with --tag attribute — git push origin master --tags
what does this line means and why it is important

Arun Kumar G • Jul 6 '20 • Edited

Its because with each version update the code will be tagged and you need to have these tags in the remote too, otherwise you might end up creating duplicate version

BuvaneswariRK • Jul 19 '21 • Edited

Hi Dinesh, There is a feature that uuid generation for the filename to avoid cache issue by default, will that be effective when compared to your solution?

alireza firouzyar • Feb 22 '22

Hi Dinesh

I have problem with infinit reloading even with Promise
dose any one fixed the infinit reloading?