Invalidate browser cache for site migrated from React to Next.js

Unanswered

KiZa posted this in #help-forum

2023-10-05T13:01:07.000Z

Hi! I migrated a site from React to Next.js and moved it from Netlify to Vercel. In the react site the cache was set to 365 days, so all old visitors to the domain keep seeing the old React website. Is there anything I can do to force the browser to clear the cache? It seems like I have to do something on the server/Vercel level? I tried redirecting from the domain.com to www.domain.com but even there the browser keeps loading domain.com.
Thanks a lot for any suggestions!

5 Replies

Dunker

2023-10-05T14:17:57.000Z

look at next docs #caching

@Dunker look at next docs #caching

KiZaOP

2023-10-05T14:47:30.000Z

Can I use that? It seems to me that the browser never even gets to fetch any of the next code, because the index.html file from the react app is loaded from the browser cache

@KiZa Can I use that? It seems to me that the browser never even gets to fetch any of the next code, because the index.html file from the react app is loaded from the browser cache

Dunker

2023-10-05T14:58:15.000Z

arent you using next app dir now

KiZaOP

2023-10-05T15:14:41.000Z

No, the new app dir wasn't ready when I started the transition. Reckon it's still where I should look for a solution?

KiZaOP

2023-10-05T15:25:57.000Z

I tried

import packageJson from â€œ../package.jsonâ€;

caching= ()=> {
let version = localStorage.getItem('version');
    if(version!=packageJson.version)
    {
        if('caches' in window){
         caches.keys().then((names) => {
        // Delete all the cache files
        names.forEach(name => {
            caches.delete(name);
        })
    });

    // Makes sure the page reloads. Changes are only visible after you refresh.
    window.location.reload(true);
}

      localStorage.clear();
      localStorage.setItem('version',packageJson.version);
    }
};

Still loads the cached React - it doesn't even redirect from domain.com to www.domain.com