Los navegadores almacenan en caché los archivos estáticos. Es para lo que están diseñados. 99% del tiempo, eso es algo bueno. Hasta que nosotros, como desarrolladores, actualicemos ese contenido estático.

Si un desarrollador actualiza un archivo javascript, pero el navegador de un usuario extrae la versión almacenada en caché, entonces:

• En el mejor de los casos, le faltarán algunas funciones nuevas hasta que el navegador decida actualizar su caché.
• En el peor de los casos, si también actualizó la página html para llamar a una función javascript que no existía en la versión anterior del archivo javascript que el navegador almacenó en caché, su página se rompe

Como desarrolladores, sabemos presionar Ctrl+Shift+R, o Ctrl+F5, o abrir la consola de desarrollo, deshabilitar el caché en la pestaña Red y volver a cargar. Pero los usuarios no lo saben.

¿Cuál es la mejor práctica para manejar las actualizaciones de contenido estático?

• ¿Es para asegurarse de que cuando agrega nuevas funciones a un archivo .js , envíe la actualización a producción unas horas/días antes de actualizar el html para llamar a esa función en las etiquetas <script> , lo que permite que los navegadores actualicen su caché? durante ese tiempo?
• ¿Es para no llamar a las funciones de javascript desde HTML dentro de las etiquetas <script> ?
• ¿Hay alguna manera de forzar de alguna manera a los navegadores a que expiren el caché en un archivo estático específico cuando lo actualice?
• ¿Algo más?

Obviamente, es posible deshabilitar todo el almacenamiento en caché en su sitio, pero no es una solución realista.

PD. No estoy usando ningún tipo de marco frontend, solo javascript/jquery sin procesar. Si la situación es diferente con los marcos frontend, me encantaría saberlo también a un alto nivel.