Browsers cache static files. It's what they're designed to do. 99% of the time, that's a good thing. Until we as developers update that static content.

If a developer updates a javascript file, but a user's browser pulls the cached version of it, then:

• Best case, it'll be missing some new functionality until the browser decides to update its cache
• Worse case, if you also updated the html page to call a javascript function that didn't exist in the older version of the javascript file that the browser cached, your page breaks

As developers, we know to hit Ctrl+Shift+R, or Ctrl+F5, or open dev console, disable cache on the Network tab, and reload. But users don't know that.

What is the best practice to handle updates to static content?

• Is it to make sure that when you add new functions to a .js file, you push out the update to production a few hours/days before you update the html to call that function in <script> tags, allowing browsers to updated their cache over that time?
• Is it to not call javascript functions from HTML within <script> tags at all?
• Is there a way to somehow force browsers to expire cache on a specific static file when you update it?
• Something else?

Obviously disabling all caching on your site is possible, but not a realistic solution.

PS. I'm not using any kind of frontend framework - just raw javascript/jquery. If the situation is different with frontend frameworks, I'd love to heard about that too at a high level