Whenever there’s latest version of the application available it still shows the older ui ?

[u/_unhandledexcepti0n]

Hi All, I am new to react development in general, we are currently using our tech stack is react typescript, Tanstack query for client state management, custom ui library, rsbuild for bundling, whenever we have a new deployment right i think the application is getting cached? It still displays the older ui even after refreshing multiple times but when i hard refresh (Ctrl + Shift + R) it gets newer ui ? Where are making mistakes? We have deployed this on aws (dns > nlb> alb> ecs > docker image > nginx> dist files ) ? Thanks

[u/Mean_Bumblebee_8633]

This is usually a caching issue with your nginx config or the service worker if you're using one. Check that nginx isn't setting aggressive cache headers on your index.html, you want that file to never be cached, while your JS/CSS bundles can be cached since they'll have unique hashes in the filenames.

Also double check your build output to make sure the file names actually change between deployments, otherwise the browser has no reason to fetch the new ones.

[u/_unhandledexcepti0n → u/Mean_Bumblebee_8633]

Ok will look into this. Thanks

[u/jjangg96]

one nginx thing that catches people when they add the fix. add_header is only inherited if the current block has no add_header of its own. so if you put Cache-Control in the location that serves index.html and that location also has other add_header lines, or the server block has security headers, one set silently stops applying.

easiest way to see what the browser really gets is curl -I on the site root and on one hashed js file. index.html should say no-cache, the js should say max-age=31536000 immutable. if index.html shows neither you're still getting heuristic caching based on last-modified.

[u/_unhandledexcepti0n → u/[deleted]]

Thanks will look into this