Tipos de caché en aplicaciones web (Guía completa con ejemplos) ⚡

El uso de caché es una de las estrategias más efectivas para mejorar el rendimiento de una aplicación web. Permite reducir tiempos de carga, disminuir la carga del servidor y ofrecer una mejor experiencia al usuario.

En este artículo exploramos los principales tipos de caché, cómo funcionan y cuándo utilizarlos.

1. 🌐 Browser Cache

El Browser Cache almacena archivos estáticos directamente en el navegador del usuario.

🧠 ¿Qué guarda?

• CSS
• JavaScript
• Imágenes
• Fuentes

🛠 Ejemplo (Headers)

Cache-Control: public, max-age=31536000

✅ Beneficios

• Carga más rápida en visitas repetidas
• Menos solicitudes al servidor

⚠️ Consideraciones

• Usa versionado de archivos (app.v2.js) para evitar caché obsoleta

2. 📡 HTTP Cache

Se controla mediante headers HTTP enviados por el servidor.

🧠 Concepto

Define cómo y por cuánto tiempo se cachea una respuesta.

🛠 Ejemplo

Cache-Control: no-cache
ETag: "abc123"

🔍 Tipos de control

• no-cache → valida antes de usar
• no-store → no guardar
• max-age → tiempo de vida

✅ Cuándo usarlo

• APIs públicas
• Recursos dinámicos controlados

3. 🌍 CDN Cache

Una CDN (Content Delivery Network) distribuye contenido en servidores alrededor del mundo.

🧠 Concepto

Servir contenido desde el nodo más cercano al usuario.

🛠 Ejemplo

• Cloudflare
• AWS CloudFront

✅ Beneficios

• Menor latencia
• Alta disponibilidad
• Escalabilidad global

📌 Ideal para

• Archivos estáticos
• Imágenes, videos, assets

4. ⚙️ Service Worker Cache

Utilizado en aplicaciones PWA para habilitar funcionalidades offline.

🧠 Concepto

Un script que intercepta requests y sirve contenido cacheado.

🛠 Ejemplo

self.addEventListener("fetch", (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

✅ Casos de uso

• Apps offline
• Experiencias rápidas en móviles
• Apps tipo Uber, Twitter Lite

5. 🔌 API Cache

Consiste en almacenar respuestas de APIs para evitar llamadas repetidas.

🧠 Concepto

Cachear datos del backend temporalmente.

🛠 Ejemplo (Node.js con Redis)

const redis = require("redis");
const client = redis.createClient();

app.get("/users", async (req, res) => {
  const cached = await client.get("users");

  if (cached) {
    return res.json(JSON.parse(cached));
  }

  const users = await getUsersFromDB();
  await client.setEx("users", 60, JSON.stringify(users));

  res.json(users);
});

✅ Beneficios

• Reduce carga en base de datos
• Mejora tiempos de respuesta

6. 🧠 In-Memory Cache

Almacena datos directamente en memoria RAM del servidor.

🧠 Concepto

Acceso ultra rápido, pero volátil.

🛠 Ejemplo

const cache = new Map();

function getUser(id) {
  if (cache.has(id)) return cache.get(id);

  const user = db.find(id);
  cache.set(id, user);

  return user;
}

✅ Cuándo usarlo

• Datos frecuentes
• Cálculos costosos
• Sesiones temporales

⚠️ Limitaciones

• Se pierde al reiniciar el servidor
• No escalable sin herramientas externas

⚖️ Comparativa rápida

🧠 Estrategia recomendada

Una app moderna combina múltiples capas de caché:

Browser → CDN → HTTP → API → In-Memory → Database

🏁 Resumen

El caché no es una optimización opcional, es una necesidad en aplicaciones modernas.

Bien implementado, permite:

• ⚡ Mejorar el rendimiento
• 💸 Reducir costos de infraestructura
• 🚀 Escalar sin problemas