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).
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.
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.