reactjsnginx

how to avoid force refresh browser when I release my web static files

I got a react web site, and the bundle.js has a hash tag .but every time I release, the users need to force refresh to get my new version of javascript

so I think, yeah, the html is cached, right?

I put these lines in my index.html

    <meta http-equiv="pragram" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="0" />

and change my nginx.conf

location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        add_header Cache-Control "no-cache, no-store";    # i added this line
        try_files $uri $uri/ /index.html;
    }

but after I deployed, I still need to force refresh every time I release. I can't get the new version of javascript file

how can I achieve this?

that I don't need to refresh, stay on the page, or when I click on the next router, everything is the new one.

Solution

  • ok, found this post:https://www.syncfusion.com/blogs/post/propagate-front-end-updates.aspx

    it seems to need to set a setInterval to query the index.html ,and find if the loaded javasript file has different hash suffix.

    but I concern about the performance, maybe the server side can push the version by Server-Side Push