Cómo usar Cache-Control en Vercel para imágenes

Cuando trabajas en Astro y sirves imágenes desde la carpeta /public, Vercel las entrega como archivos estáticos.

Eso significa que tú tienes el control total sobre cómo y cuánto tiempo quieres que se guarden en la caché del navegador.

💡 ¿Por qué es importante?

Si no configuras nada, cada vez que alguien entra a tu web, el navegador puede volver a pedir la misma imagen, aunque ya la tenga.

Esto es lento e innecesario, sobre todo si tu página usa las mismas imágenes en varias rutas (por ejemplo: listados y detalles).

⚙️ La solución: Cache-Control

Vercel te permite definir headers directamente en un archivo vercel.json.

Para imágenes que no cambian, las guardamos en public/images y configuramos lo siguiente:

{
	"headers": [
		{
			"source": "/images/(.*)",
			"headers": [
				{
					"key": "Cache-Control",
					"value": "public, max-age=31536000, immutable"
				}
			]
		}
	]
}

🚀 ¿Qué hace esto?

• public: cualquiera puede guardar la imagen en caché (incluido CDN y navegador).
• max-age=31536000: la imagen se guarda por 1 año.
• immutable: si la URL no cambia, el navegador nunca la volverá a descargar.

⚡️ ¿Afecta los costos?

¡Al contrario!

Menos descargas = menos tráfico en Vercel = menos visitas a tu backend o S3.

⚠️ Cuidado con las actualizaciones

Si cambias una imagen y usas el mismo nombre, el navegador seguirá mostrando la antigua.

Solución: cuando subas una nueva versión, cambia el nombre, por ejemplo:

logo-v2.png
foto-abril2025.jpg

✅ Conclusión

Configurar Cache-Control es una forma simple de hacer tu página más rápida y eficiente, especialmente en Astro cuando sirves imágenes desde /public. Si tu web usa imágenes que no cambian, esta es la forma correcta de manejar caché como un pro.

¡Gracias por leer!