No cache update with Create React App


I’ve an App that isn’t updated every time that I deploy it (using the Cache clear option of Netlify). I’ve to clean the cache in the browser to see some internal changes. It’s not enough with refresh the browser. Refreshing the browser let me see the changes of some components, but it doesn’t updates the main component (App.js).

It’s obviously a cache problem. But I don’t understand why this happens. I’ve learn today that the browser first checks the max-age, that it’s on 0 as default, and then in the Etag, that it’s supposedly updated on every deploy. But my knowledge is limited and I don’t know why this happens, and specially why only occurs with my main React component (and not the others).

This seems like a service worker issue. You might want to share the website’s link for us to be able to check.

Hi, @angel-luis. Yes, @hrishikesh is correct. To troubleshoot we need to know what response is incorrect.

There are several ways to send us this information. First, you can send us the URL and tell us how to know what version is being seen.

Alternatively, you can send use the x-nf-request-id response header for an incorrect HTTP response.

There more information about this header here:

If that header isn’t available for any reason, please send the information it replaces (or as many of these details as possible). Those details are:

  • the complete URL requested
  • the IP address for the system making the request
  • the IP address for the CDN node that responded
  • the day of the request
  • the time of the request
  • the timezone the time is in

To summarize, if we are going to troubleshoot we need to see the issue happening and this information will help us to do so.

The situtation is a bit weird.

The last week, as the page wasn’t updated at all, I set the headers to “Last modified” and it worked. But yesterday, I saw that the changes were reverted. So then, I remove the custom headers.

Now I’m testing. When I modifiy the App.js files adding a console.log(), and I deploy it, it consoles logs without clearing the cache. So I’m more confused now.

But I’ll wait to check the x-nf header this afternoon.

The version that has become obsolete has the following header @luke :

x-nf-request-id: 1e3ca1cd-a188-4847-b495-c1d347d8db15-1728099

I’m still working on it. Webpack hashing files it’s ok, Netlify caching it’s ok. I’m starting to suspect that it’s something related to the IndexedDB. I don’t know if when I clear the cache in Chrome also clears the IndexedDB but I think so.

Well, it seems to be a bug with IndexedDB or the Localforage library in my code. Because in the site that is showing old content, the App.js it’s correctly updated (I made the mistake of thinking that no), but the data that the React App manages it doesn’t corresponds with the database that I can inspect with the Google Chrome tools.

So something in my code is causing that the previous builds don’t update the client indexedDB, and when I clear the cache, indexedDB it’s also cleared so the web content is updated.

Sorry for bothering you.