Cache formation in react application

Question

In my react application when i change some data it is not reflecting immediately. cache is forming, it is reflecting only when I reload page with disable cache in network tab and refresh again by enable cache in network tab. It same following in the other user side, i need the change to be reflected.I need my changes to be reflected both on HR and User side. I tried using html meta tag to clear cache in index.html

To be specific, I'm in the HR flow where I change the profile picture of one of my employee, the changes image is not reflecting immediately, when I disable my cache in network tab and reload the page it is reflecting, same goes to user flow. <Avatar src={${employeeData?.profileUrl}?version=${Date.now()}} size={54} /> I tried using timestamp, but it is making the profile image invisible.

Answer 1

Try setting-

For HTML-

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0"> 

or in Nodejs-

 response.setHeader("Cache-Control", "no-cache, no-store,
 must-revalidate"); // HTTP 1.1. response.setHeader("Pragma",
 "no-cache"); // HTTP 1.0. response.setHeader("Expires", "0"); //
 Proxies.

Or try http header Cache-Control. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control