Problema de caché en los navegadores

El navegador almacena en caché los archivos de estilos CSS, scripts JavaScript e imágenes vinculados. El almacenamiento en caché significa que los archivos vinculados solo son descargados por el navegador la primera vez que el usuario visita el sitio. En visitas posteriores, estos archivos no se descargarán nuevamente, sino que se tomarán de la caché del navegador.

El almacenamiento en caché es útil. Está creado para aumentar la velocidad de carga del sitio. Después de todo, es más rápido para el navegador tomar un archivo de su propio almacenamiento que descargarlo cada vez desde internet.

Sin embargo, por la velocidad se paga con inconvenientes durante el desarrollo. El caso es que si usted cambia algo en su código y luego publica los cambios en el hosting, todos los usuarios que ya han visitado su sitio tendrán una copia antigua del código en caché.

Primera solución al problema

Para combatir este comportamiento, es necesario renombrar cada vez los archivos modificados. En la práctica, esto no es conveniente, por lo que se utiliza un truco astuto. Su esencia consiste en que, al vincular el archivo, después del nombre del archivo colocamos un signo de interrogación, igual y el número de versión de su script. Esta construcción se llama parámetro GET.

La presencia de un parámetro GET en el nombre del archivo "no estropea" la ruta desde el punto de vista del servidor, indicando aún el mismo archivo. Pero desde el punto de vista del navegador, cambiar el parámetro GET obliga al navegador a considerar que la ruta al archivo ha cambiado y a descargar el archivo nuevamente.

Para combatir la caché, cuando realice cambios en su archivo de código, necesitará aumentar el valor del parámetro GET en uno. Vea un ejemplo de la aplicación de este enfoque:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.css?v=1">
		<script src="script.js?v=1"></script>
	</head>
	<body>
		
	</body>
</html>

Segunda solución al problema

Existe también un enfoque más avanzado. Consiste en que a los nombres de los archivos se les añaden cadenas aleatorias, por ejemplo, así:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="styles.398db7afe3b52e94bb25.css">
		<script src="script.1d12c304c284a752cb9a.js"></script>
	</head>
	<body>
		
	</body>
</html>

Estas cadenas se llaman hashes. Un hash representa una cadena única. Se calcula a partir del contenido del archivo de una manera especial. Esto significa que a cada texto le corresponde su propio hash único. Si el texto del archivo fue modificado, entonces el hash será diferente y necesitaremos cambiarlo en el nombre del archivo.

Por supuesto, calcular los hashes manualmente y renombrar los archivos es una tarea poco agradable. Por lo tanto, este enfoque se utiliza solo en el caso de que tengamos alguna herramienta que permita calcular automáticamente los hashes y renombrar los archivos, así como cambiar los nombres de los archivos por los nuevos en los archivos HTML. Todo esto lo permite hacer Webpack. Aprenderemos esto a lo largo de todo el tutorial.