expressdeploymentbackendvercelcache-control

vercel deployed website doesn't update when github is updated


I have been facing the same problem in every project that I upload on vercel. When I commit and push some changes in a github repo connected with the vercel deployment, the vercel dashboard shows the new deployment and everything works fine on the vercel dashboard. But when I access the website with the domain, I don't see any changes I made.

Some people on the internet say its due to caching so I did this in my index.js file :

app.get('*', (req, res) =>
    res.setHeader('Cache-Control', 'no-store').sendFile(path.resolve('dist', 'index.html'))
);

but this doesn't solve it. then I tried :

app.use(express.static(path.resolve(__dirname, "dist")), {
    setHeaders: function (res, path, stat) {
        res.setHeader("Cache-Control", "no-store");
    }
})

and even this didn't work. I am not finding a solution for this problem anywhere on the internet.


Solution

  • I struggled a lot with the same problem, but I found a simple solution:

    1. Open your chrome Devtools and go to "network"
    2. Check the checkbox next to "Disable cache"

    This always works for me, even when I make more changes to the HTML files.

    EDIT: You can also try the awesome "nocache" middleware for express:

    const nocache = require("nocache");
    
    // ...
    
    app.use(nocache());
    

    I think this is a client-side problem. I tried @elias' answer too, and I think his answer works because the cache is being removed and added again, but his answer only works once before you need to redo it.