I'm working on this web app built with React, but I'm facing a tricky issue with versioning. Whenever I deploy a new version, the changes don't show up immediately for users. Even hitting the refresh button doesn't always do the trick, and that's frustrating!
I want to find a solution where the latest version of the app is automatically reflected for users as soon as they open it, without them losing any data, especially if they're actively using the app. I heard browser caching might be the culprit, but I'm not sure how to handle it properly in React.
How can I ensure real-time updates on the client side without the need for users to manually refresh their browsers? Any tips, tricks, or best practices to manage versioning and cache effectively in a React app would be a game-changer for me. Your help is much appreciated!
Note: This is happening mostly when I bookmark but I have encountered cases when it cached the previous version even without bookmarking
I've heard of cache busting and referred this answer text, and I deployed the app with this in the webconfig but it isn't working as expected. I still have to manually refresh the screen to reflect the changes and this is the same in other environments as well.
I came across another scenario which uses hash to manually update the URL and I was able to implement it but not sure if it works because I still had to manually refresh the page to reflect the changes, however it doesn't meet the client's requirements as it looks like a scam site ex: https://stackoverflow.com/Dashboard/#jsgu2jd
