I have an app built-out and functioning well, built using React, Vite, and served by Astro. The build files are sent to an S3 bucket which is then deployed to a Cloudfront. To clarify, this is a microfrontend app, with the React child app being served statically by the Astro parent app.
Mainly with styling changes, users would have to hard reload/clear cache to see new releases. For example, I have implemented a sort of dynamic color-changing schema, that users can only see if they hard reload/clear cache. This implementation works fine in an incognito browser, which leads me to thinking it is a cache issue.
The expected behaviour is after build and push, users should be able to see the new changes on the site without having to clear cache/reload, which is not what is happening.
Has anyone run into this issue?

I have tried adding this to the index.html tag.

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

Which on the “Network” tab on the console, I’d see the header for it includes “Cache-control: No cache”. But it doesn’t seem to fix my issue.
I have triple checked to make sure Cloudfront is clearing cache every time we push, and Cloudfront is.
I am considering cache-busting, but have heard that could come with a performance issue due to increased server load. If someone has a suggestion, or a library/tech (I have heard may be Webpack or a Vite package?) you have tried that worked for you, I would love to hear it.