How to Resolve Browser Cache Invalidation Issue in Vite-React Project Deployment?

Problem: I'm encountering a persistent issue with my Vite-React project deployment. Whenever I deploy a new version, the changes are not immediately reflected on the production URL. Instead, they only appear after performing a hard reload. This seems to be a cache-related problem.

Details: I have a Vite-React project deployed in a production environment. However, whenever I push updates and redeploy the application, users visiting the site often don't see the latest changes until they perform a hard reload (Ctrl + Shift + R or Cmd + Shift + R). This indicates that there's a caching issue preventing the new version from being fetched and displayed immediately.

Steps Taken: I've tried various methods to tackle this problem, including:

1. Adding cache-control headers in the server configuration.
2. Attempting to bust cache by changing the version data of package.json.

Expected Outcome: I expect that whenever I deploy a new version of my Vite-React project, the changes should be immediately visible to users without requiring them to perform a hard reload. The deployment process should handle cache invalidation effectively to ensure seamless updates.

Seeking Solution: I'm looking for insights and recommendations on how to effectively manage browser cache invalidation in my Vite-React project deployment. Specifically, I need guidance on configuring Vite or implementing strategies to ensure that new versions are fetched and displayed automatically without relying on users to perform manual cache clearing.

used React Cache Buster and this solved my problem.