Por Qué Importa el Testing de Caché
El caching mejora dramáticamente el rendimiento web almacenando copias de recursos. Sin embargo, un caching incorrecto hace que los usuarios vean contenido desactualizado o experimenten páginas rotas después de deployments.
Capas de Caché
Cada capa puede cachear y servir contenido obsoleto independientemente: Caché del Navegador → CDN Edge → Proxy Inverso → Caché de Aplicación → Base de Datos.
Headers de Caché Clave
| Header | Propósito | Ejemplo |
|---|---|---|
Cache-Control | Directiva principal | max-age=3600, public |
ETag | Huella del contenido | "abc123def456" |
Last-Modified | Última modificación | Fecha |
Vary | Caché varía por header | Vary: Accept-Language |
Directivas Cache-Control
| Directiva | Significado |
|---|---|
public | Cualquier caché puede almacenar |
private | Solo el navegador del usuario |
no-cache | Debe revalidar con servidor antes de usar |
no-store | No debe cachearse en absoluto |
max-age=N | Válido por N segundos |
immutable | El contenido nunca cambia |
Qué Probar
Comportamiento de Caché Correcto
| Tipo de Recurso | Caching Esperado | Por Qué |
|---|---|---|
| Assets estáticos (JS, CSS) | Caché largo (1 año) con hash | Cache busting maneja actualizaciones |
| Páginas HTML | no-cache o corto | Contenido cambia frecuentemente |
| API pública | Caché corto (minutos) | Balance frescura y rendimiento |
| API autenticada | private, no-store | Prevenir filtración entre usuarios |
| Endpoints de auth | no-store | Datos sensibles |
Invalidación Después de Deployment
- Deployar cambio en CSS/JS
- Verificar que usuarios obtienen la nueva versión
- Verificar que versión cacheada vieja no rompe el nuevo HTML
Caché y Autenticación
- Datos del Usuario A nunca deben servirse desde caché al Usuario B
- Logout debe invalidar contenido cacheado específico del usuario
Vary: Cookieoprivatepara respuestas autenticadas
Ejercicio: Auditoría de Caché
Paso 1: Inspeccionar Headers
Abre DevTools > Network. Carga la página y verifica headers:
| Recurso | Cache-Control | ETag | Max-Age | ¿Correcto? |
|---|---|---|---|---|
| Página HTML | ||||
| Archivo CSS | ||||
| Bundle JS | ||||
| Imagen | ||||
| API pública | ||||
| API autenticada |
Paso 2: Probar Cache Busting
- Nota las URLs actuales de JS/CSS (con hashes)
- Haz un cambio y deploya
- Verifica que las URLs cambiaron
- Hard refresh (Ctrl+Shift+R) debe cargar archivos nuevos
Paso 3: Probar Contenido Obsoleto
- Carga página con contenido dinámico
- Actualiza contenido desde otro navegador/API
- Refresca en el navegador original
- Verifica que se muestra contenido actualizado
Paso 4: Test de Caché Cross-Usuario
- Login como Usuario A, visita perfil
- Logout, login como Usuario B
- Visita el mismo endpoint de perfil
- Verifica datos de Usuario B (no datos cacheados de A)
Solución: Bugs Comunes de Caché
Bug 1: CSS cacheado sin hash en URL. Después de deployment, usuarios veían CSS viejo. Corrección: Cache busting con hashes de contenido.
Bug 2: Respuesta API autenticada cacheada por CDN. CDN cacheó perfil de un usuario y lo sirvió a otros. Corrección: Cache-Control: private, no-store en endpoints autenticados.
Bug 3: Precio de producto cacheado por 1 hora. Después de actualizar precio de oferta, clientes veían el precio viejo. Corrección: Reducir TTL o implementar purge.
Bug 4: HTML obsoleto después de deployment. HTML cacheado referenciaba URLs de JS viejos que ya no existían. Corrección: no-cache para HTML.
Bug 5: Botón atrás muestra datos sensibles cacheados. Después de logout, el botón atrás mostraba dashboard del usuario anterior. Corrección: no-store en páginas autenticadas.
Depuración de Problemas de Caché
# Verificar headers de caché
curl -I https://example.com/page
# Verificar si CDN sirve contenido cacheado
curl -I https://example.com/style.css | grep -i "age\|cache-control\|etag"
Puntos Clave
- El testing de caché debe cubrir todas las capas: navegador, CDN y servidor
- Assets estáticos deben usar caché largo con hashes de contenido para cache busting
- HTML debe usar no-cache para que usuarios siempre obtengan la última versión
- Respuestas autenticadas deben usar private o no-store
- Siempre prueba caché después de deployments
- El botón atrás del navegador puede servir contenido cacheado obsoleto