Avoid deleting cache on browser on react new version after upload - reactjs

Currently We have a ReactJs App that constantly is pushing new features and our users are pissed off because some old features don't run as expected; this is due that there is a new Javascript file for it to be rendered on the build folder.
There is a solution for this? So far I've changed NGINX expiration but this not seem to be a final solution since still the old javascript being rendered.

Related

Updating React application

I have developed a react application which is hoisted as www.movielust.in .As the react application creates cache inside the browser I am unable to see changes at the same moment.As it loads the content directly from cache is there any way that I could deploy th app in such a way that everytime i push a change it updates cache or fresh reload automatically as other users won't understand such things.
Just to explain in more details.. If I desployed a new crousal on homescreen so if I open the website in icognito mode it shows the latest updated website but on the other hand if I open it normally it uses browser cache and open the same old website without updating new changes.. So I was thinking about anyway to update the app whenever I push a new change
When your upload before that change your package.json build version it's might help you

How do I prevent browser caching of webpack bundle?

I am using webpack to bundle a react app in a js file which I want add to client site. So I end up with a app.js and I can provide a url for where the file is hosted to clients https://example.mysite.com/apps/app.js and this can be included via a script tag on client site. Simple enough.
The issue I might run into here is browser side caching. I can't use version tags here because asking a client to continuously update code on their site is not a realistic expectation.
Webpack hashing is also not an option because this would mean updating the file on the client side, which again is something I would like to work around.
Is there a way to prevent my app.js file from being cached and fetching a new version of the file every time the app.js file has changed?

Moved off of React SPA on S3/Cloudfront, but users' browsers are still showing old, cached SPA

DNS Is being handled via Route53. Previously, had a React SPA deployed on AWS S3 (with Cloudfront dist + SSL). Moved off of that to a SSR NextJS app on ElasticBeanstalk, but even after changing the A records and invalidating CF, some users are still reporting their browser is using the old S3 SPA. Only fix is for them to manually clear their cache for the site.
Asking each random user that's cached my site to manually refresh their cache for the page doesn't seem like a good solution ;)
Here's what I've done thus far:
Updated Route53 (A record) to point to the EB server (this is working as intended),
Tried disabling the associated CF distribution,
When that didn't work, I removed the files in S3 and invalidated the CF dist,
EDIT: After deleting the CF dist completely, users are able to go to the new site - but only after hard-refreshing a half-dozen times. I still feel like there should be a more elegant solution to this requiring little/no user know-how.
All of my CSS & JS files had version numbers appended to help with cache-busting. Users report that they see the HTML structure of the page, but the versioned JS & CSS 404 for them (as they should, since the files no longer exist).
I would have thought this would be enough to have the browser swap update its cache - but apparently not. Only solution so far has been for affected users to manually clear their cache.
More than happy to offer more details if needed, any thoughts/input is super appreciated!

How to force browser hard reload/cache clear, after deploy new version of React app

I have a React app that is deployed in amazon aws. Whenever i update the code, i need to force hard reload manually on the client side(on Chrome ctrl+f5).
Is there a way to not have to do this manually in React?
I've noticed some posts about setting a query string param with a versioning system, and many solutions for angular CLI, but nothing on React.
Is there i flag i can pass in the build of the code?

Admin-on-rest (React) - How to handle browser caching of JS files

I have recently put an admin-on-rest app into production and it works great. However, when I update the app, the updated files within my project src directory are cached. For example I made a change to the restClient.js file, but this only gets loaded after users do a CTRL+F5 in the app.
What is the recommended way to handle this? Can I somehow add a cachebust to the files? Or should I simply set expires in the index.html file head section?
Ps. this questions is maybe more related to React apps in general then admin-on-rest..

Resources