i have a react js based web app the problem is every time there is a new deployment it needs to do hard refresh to see the change implemented which is very irritating to the client i could see only two options to fix this

Client Side

Modifying external resources by appending some random stuff like "script.js?ts=timestring"

OR

Server Side

Using Web Pack to create a bundle and modifying the file name from server side by some random stuff

Now is there any other way to do this , also in client side solution i am trying to achieve this

by re appending the loaded scripts to the loading page in index.html

Array.from(document.querySelectorAll('script')).forEach(s => {
                 
                    var fileref = document.createElement('script');
                    fileref.setAttribute("type", "text/javascript");
                    fileref.setAttribute("src", s.src + "?ts=" + Date.now().toString());
                    document.getElementsByTagName("head")[0].appendChild(fileref);
                }  

but this solution is not working because appending the script again causing app to re-render resulting in blank page

please let me know what better can i do in both the cases , whether handle it client side of server side by webpack