Pregunta 1Volviste a desplegar, pero en tu navegador sigue la pantalla anterior. Si la abres en otro dispositivo, sale la nueva. ¿Dónde está la causa?
Lo arreglaste y la pantalla no cambia — cómo funciona la caché
Este artículo forma parte del curso Fundamentos de informática, que construye desde cero los conocimientos prácticos de informática que necesitas como mínimo para programar y hacer vibe coding.
Si arreglas algo y no cambia, es porque queda una copia vieja en algún sitio. Los diagramas muestran cómo acotarlo entre el navegador, el CDN y el servidor público, y cómo hacer que un cambio llegue seguro.
Este artículo trata la situación en que lo arreglaste y la pantalla no cambia.
Arreglaste el código y desplegaste, pero al abrir la página sigue estando la versión anterior.
La causa no suele ser el código, sino una copia vieja que sigue en algún sitio.
Que solo tú veas la versión vieja o que la vean todos te dice dónde se quedó.
Qué es una caché — devolver una copia guardada en vez de ir a buscarla otra vez
La caché (cache: el mecanismo que guarda cerca lo que se trajo una vez y, a partir de entonces, lo devuelve en vez de ir a buscarlo de nuevo) existe para no ir a buscar lo mismo una y otra vez.
Lo que se trae una vez se guarda cerca y, a partir de la segunda vez, se usa esa copia.
A cambio de velocidad, aparece un rato en el que no se entera de que algo se ha actualizado.
Ese rato que se guarda es el tiempo de validez (max-age: el tiempo durante el cual se puede usar la copia guardada sin ir a buscarla otra vez).
Hasta que vence el tiempo de validez, se sigue usando la copia local aunque arregles el servidor.
Cuanto menos cambia algo, como pasa con las imágenes y el CSS, más largo se suele poner.
Hay un rato en el que el arreglo no se ve porque el tiempo de validez todavía no ha vencido.
La caché es un mecanismo que devuelve una copia vieja
La caché es el mecanismo que guarda cerca lo que se trajo una vez y a partir de entonces devuelve eso.
Se vuelve más rápido porque no va a buscarlo cada vez, pero no se entera de que el lado del servidor se actualizó mientras tanto, así que aparece la situación de arreglarlo y que no cambie.
Los tres sitios donde queda una copia — en tu navegador, en el camino de reparto y en el servidor
La copia no queda en un solo sitio.
Hay tres sitios, anidados, que van del más cercano al usuario hacia fuera.
El más interior, la copia que tiene tu propio navegador, es la caché del navegador (browser cache).
Los sitios por los que pasa antes de que salga la pantalla
1. En el navegador del usuario (caché del navegador)
- Queda solo en el dispositivo de esa persona
- Al recargar se puede volver a traer
- Si solo tú ves la versión vieja, es este
2. En la capa de distribución (CDN)
- Una copia colocada cerca del usuario
- Todos ven la misma versión vieja
- Se queda hasta que mandas borrarla
3. En el servidor público
- Los propios archivos generados que subiste
- Si el despliegue falló, sigue estando el anterior
- Si esto está viejo, todos ven la versión vieja
El segundo, el CDN (Content Delivery Network: el mecanismo que coloca copias cerca de los usuarios y reparte desde ahí), viene ya incorporado en muchos destinos de despliegue.
Estos tres sitios se diferencian en cómo se borran y en hasta dónde llega el efecto.
Mandar borrar la copia del CDN es una purga (purge: borrar la copia que tiene la capa de distribución y hacer que la traiga de nuevo).
A veces está configurado para purgar automáticamente en cada despliegue.
Qué es recargar a la fuerza
Con una recarga normal, a veces se usa la copia local tal cual.
La acción que obliga a traerla de nuevo se llama recarga forzada y, si solo quieres comprobarlo, abrir la página en una ventana que no guarda historial hace lo mismo.
Acota según si solo tú ves la versión vieja o la ven todos
En vez de probar los tres sitios de arriba abajo, acotar primero el alcance termina antes.
Lo que miras es si otras personas además de ti también ven la versión vieja.
Si eres solo tú, la causa no está en ningún sitio más que dentro de tu propio navegador.
Si las demás personas también ven la versión vieja, por mucho que recargues en tu equipo no cambia nada.
El de abajo del todo es el caso en que los archivos nuevos ni siquiera llegaron al servidor público.
Si la compilación falló, lo que está publicado siguen siendo los archivos generados anteriores.
Que se arregle al recargar no quiere decir que esté resuelto
Si recargas en tu equipo te sale la versión nueva, pero eso solo ha reemplazado la copia de tu propia máquina.
En los dispositivos de los usuarios, la copia vieja se queda hasta que vence el tiempo de validez.
Si cambias el nombre del archivo, la copia vieja deja de usarse
En vez de ir borrando copias por todas partes, hay una manera de que la copia vieja no llegue a usarse.
Consiste en cambiar el nombre del archivo junto con el contenido.
Si sustituyes una parte del nombre del archivo por caracteres calculados a partir del contenido, el nombre cambia cada vez que cambia el contenido.
Si el nombre es distinto, la copia local es otro archivo y no se usa.
Este trabajo de poner nombres se hace automáticamente al compilar.
No hace falta que pienses tú los nombres.
| Archivo | Cómo se le pone nombre | Cómo fijar el tiempo de validez |
|---|---|---|
| index.html | No cambia | Ponerlo corto |
| app.a1b2.js | El nombre cambia cuando cambia el contenido | Se puede poner largo |
| Materiales como las imágenes | El nombre cambia cuando cambia el contenido | Se puede poner largo |
Al index.html de entrada es al único al que no se le puede cambiar el nombre, así que le dejas un tiempo de validez corto.
Si los nombres de los archivos que carga por dentro son nuevos, de ahí en adelante lo nuevo llega solo.
En cuanto lo encuentra en un punto anterior, ya no sigue más adelante a buscarlo.
Por eso, si aunque sea un solo sitio conserva una copia vieja, lo nuevo no llega.
Cambiar el nombre es más seguro que ir borrando copias
Si el nombre del archivo cambia cuando cambia el contenido, la copia local es otro archivo y no se usa.
Este nombrado lo hace la compilación de forma automática, así que solo le dejas un tiempo de validez corto al archivo de entrada, al que no se le puede cambiar el nombre.
QUIZ
Verificación de conocimientos
Responde cada pregunta una a una.
Pregunta 2¿Qué hace el navegador cuando el tiempo de validez de la caché no ha vencido?
Pregunta 3¿Qué pasa si haces que el nombre del archivo cambie cada vez que cambia el contenido?