Caché HTTP y CDN: Estrategias de Caché para Rendimiento Web

¿Qué es el Caché HTTP?

El caché HTTP es el almacenamiento temporal de recursos (HTML, CSS, JS, imágenes) por navegadores y servidores intermedios (proxy, CDN).

El caché reduce el tráfico de red en solicitudes repetidas y acelera la carga de la página. Un caché bien configurado puede reducir la carga del servidor hasta un 80%.

Dos tipos de caché: Caché del navegador (lado del cliente) y caché compartido (CDN, proxy). Ambos sirven para diferentes propósitos.

El header Cache-Control es el mecanismo principal que controla el comportamiento del caché. Contiene directivas como max-age, s-maxage, no-cache, no-store.

Headers Cache-Control

max-age=3600: Especifica que el recurso es fresh por 3600 segundos (1 hora). Durante este tiempo, el navegador no hace solicitud de red.

s-maxage=3600: max-age para cachés compartidos (CDN). El navegador usa max-age, el CDN usa s-maxage.

no-cache: El recurso debe validarse con el servidor en cada uso. Se almacena en caché pero se revalida antes de usar.

no-store: El recurso no se almacena en ningún caché. Se usa para datos sensibles (información personal, banca).

public/private: public significa que se puede almacenar en cualquier caché. private significa que solo se almacena en caché del navegador (contenido específico del usuario).

immutable: El recurso nunca cambia (assets versionados). El navegador no realiza revalidación, mejorando el rendimiento.

ETag y Last-Modified

ETag (Entity Tag): Un identificador único para el recurso. El servidor lo usa para verificar si el recurso ha cambiado.

Last-Modified: Especifica la fecha de última modificación del recurso. El navegador hace solicitud condicional con header If-Modified-Since.

Solicitud condicional: El navegador hace solicitud con header If-None-Match (ETag) o If-Modified-Since (Last-Modified). Si el recurso no ha cambiado, el servidor retorna 304 Not Modified.

304 Not Modified: Si el recurso no ha cambiado, el servidor retorna solo headers, no body. Esto ahorra ancho de banda.

CDN (Content Delivery Network)

CDN es una red que sirve assets estáticos (imágenes, CSS, JS, fuentes) desde servidores en diferentes ubicaciones alrededor del mundo.

CDN sirve contenido desde el servidor más cercano al usuario. Esto reduce la latencia en un 50-80%.

CDN populares: Cloudflare, AWS CloudFront, Fastly, Akamai, Google Cloud CDN. Cada uno tiene diferente precio y características.

Configuración de CDN: Servidor de origen (fuente), servidores edge (endpoints), cache TTL (tiempo de vida), purge (limpieza de caché).

Contenido dinámico con CDN: Algunos CDN (Cloudflare Workers, Fastly Compute) pueden generar contenido dinámico en el edge.

Estrategias de Caché

Cache First: Servir del caché primero, obtener de la red si no está disponible. Ideal para assets estáticos (CSS, JS, imágenes).

Network First: Obtener de la red primero, recurrir al caché si falla. Ideal para contenido dinámico (respuestas de API).

Stale While Revalidate: Servir del caché, actualizar de la red en segundo plano. Proporciona respuesta rápida mientras mantiene el contenido fresco.

Cache Only: Servir solo del caché. Usado para aplicaciones offline.

Network Only: Obtener solo de la red. Usado para datos en tiempo real (precios de acciones, chat).

Cache Busting

Nombres de archivo versionados: Cambie el nombre del archivo con style.css?v=1.2.3 o style.abc123.css. El navegador carga el nuevo archivo.

Query string: Cache busting con style.css?v=20261025. Algunos CDN no usan query string como clave de caché.

Content hash: Webpack/Vite crea hash basado en el contenido del archivo (main.a1b2c3.js). El hash cambia cuando el contenido cambia.

Service Worker: El nuevo Service Worker se activa inmediatamente con self.skipWaiting() y clients.claim(). El caché se actualiza.