Nivel 2 · 20 min

CDN y Cache HTTP

El caché HTTP es el sistema de caché distribuido más ampliamente usado en la web. Los headers Cache-Control, ETag y Last-Modified dictan cómo browsers, proxies y CDNs cachean el contenido. Entenderlos permite diseñar aplicaciones que son rápidas globalmente sin sacrificar frescura.

Headers Cache-Control

Cache-Control es el header principal para controlar el comportamiento del caché. Directivas clave: max-age=N (cacheable por N segundos), s-maxage=N (para CDNs/proxies compartidos, sobreescribe max-age), no-cache (siempre revalidar antes de usar), no-store (nunca cachear), public (cualquier caché puede guardar), private (solo el browser del usuario), stale-while-revalidate=N (servir stale mientras revalida en background). Combinaciones comunes: max-age=3600, s-maxage=86400 para cachear más tiempo en CDN que en browser.

ETag y requests condicionales

ETag (entity tag) es un fingerprint del recurso — cuando el contenido cambia, el ETag cambia. El servidor devuelve ETag en la respuesta. El cliente manda If-None-Match: ''etag-value'' en requests posteriores. Si el recurso no cambió, el servidor responde 304 Not Modified sin body — ahorra bandwidth pero no latencia (el round-trip se hace igual). Last-Modified / If-Modified-Since funcionan igual pero con timestamps. ETags son preferibles por precisión.

CDN Edge Caching y Cache Busting

Una CDN tiene puntos de presencia (PoPs) distribuidos globalmente. El contenido se sirve desde el edge node más cercano al usuario, reduciendo latencia. Origin shield: un tier adicional de caché delante del origen para protegerlo de cache misses. Cache busting: cuando deployás una nueva versión, ¿cómo invalidás los assets en CDN? Estrategia preferida: incluir un hash del contenido en el nombre del archivo (app.abc123.js) + Cache-Control: max-age=31536000, immutable. El archivo nuevo tiene nombre nuevo — no necesitás invalidar.

Puntos clave

s-maxage controla el caché de CDN independientemente del max-age del browser — podés cachear más en el edge.
ETag/304 ahorra bandwidth pero no latencia — el cliente igualmente hace el round-trip. stale-while-revalidate revalida en background sin bloquear.
Cache busting con content hash en el filename es la estrategia más eficiente — los assets con hash son inmutables.

Code example

// Headers para SPA assets (inmutables con hash)
Cache-Control: max-age=31536000, immutable
// app.a1b2c3d4.js -- version nueva tiene nombre nuevo

// Headers para API response (CDN cachea mas que browser)
Cache-Control: max-age=60, s-maxage=300, stale-while-revalidate=30

// Headers para HTML (siempre revalidar)
Cache-Control: no-cache
ETag: "abc123"