Caché en TypeScript: aceleramos la aplicación sin dolor

Por qué su aplicación se ralentiza (y cómo solucionarlo)

¿Alguna vez ha esperado a que la interfaz se redibuje después de un clic? ¿O ha observado cómo el servidor responde a la misma solicitud varias veces seguidas? ¿Le suena familiar? Entonces este artículo es para usted. El almacenamiento en caché de datos no es solo una "buena práctica", sino una habilidad básica de cualquier desarrollador TypeScript que quiera que su aplicación vuele, no que se arrastre.

Hoy analizaremos cómo almacenar datos en caché correctamente en TypeScript: desde un simple caché en memoria en el frontend hasta estrategias avanzadas con TTL y Redis en el backend. Obtendrá fragmentos de código listos para usar que puede insertar en su proyecto hoy mismo.

¿Qué es el almacenamiento en caché y por qué es necesario en TypeScript?

El almacenamiento en caché es una técnica de almacenamiento temporal de datos de uso frecuente en un almacenamiento rápido. En lugar de ir a buscar datos a la base de datos o a un servidor remoto cada vez, guardamos el resultado de la primera solicitud y lo devolvemos en solicitudes posteriores.

Las ventajas son obvias:

• Reducción del tiempo de respuesta (latencia): el usuario recibe los datos en milisegundos
• Reducción de la carga en el servidor y la base de datos
• Ahorro de tráfico y recursos
• Posibilidad de trabajar sin conexión (para el frontend)

En TypeScript, gracias al sistema de tipos, podemos escribir un caché seguro y predecible que no se rompa en tiempo de ejecución. Veamos cómo hacerlo.

Estrategias de caché: elegir el enfoque correcto

Antes de escribir código, debe comprender qué estrategia va a utilizar. De esto depende la eficacia de su solución.

1. Caché en memoria (In-Memory Cache)

La opción más simple y rápida. Los datos se almacenan en una variable, Map u objeto. Ideal para frontend y aplicaciones Node.js pequeñas.

Inconveniente: los datos se pierden al recargar la página o reiniciar el servidor.

2. LocalStorage / SessionStorage (caché en el navegador)

Adecuado para el frontend cuando necesita guardar datos entre sesiones. Ideal para configuraciones de usuario, tokens y almacenamiento en caché de respuestas de API.

Inconveniente: acceso síncrono, límite de tamaño (5-10MB).

3. Redis (caché en el servidor)

El estándar industrial para el backend. Rápido, confiable, con soporte para TTL y estructuras de datos complejas. Funciona muy bien con Node.js a través de la librería ioredis.

Inconveniente: requiere un servicio separado (servidor Redis).

4. Service Worker + Cache API (PWA)

Caché avanzado para Progressive Web Apps. Permite interceptar solicitudes de red y devolver respuestas almacenadas en caché. Ideal para el modo sin conexión.

Escribiendo caché en TypeScript: de lo simple a lo complejo

Ahora pasamos a la práctica. Mostraré varias implementaciones, desde la básica hasta la avanzada, utilizando genéricos de TypeScript.

Caché en memoria simple con TTL

Empecemos con el clásico: un caché en memoria con eliminación automática de entradas caducadas.

// cache.tsinterface CacheEntry<T> {    data: T;    expiry: number; // timestamp en milisegundos}

class SimpleCache<T> {    private store = new Map<string, CacheEntry<T>>();

    constructor(private defaultTTL: number = 60000) {} // 60 segundos por defecto

    set(key: string, data: T, ttl?: number): void {        const expiry = Date.now() + (ttl ?? this.defaultTTL);        this.store.set(key, { data, expiry });    }

    get(key: string): T | undefined {        const entry = this.store.get(key);        if (!entry) return undefined;        if (Date.now() > entry.expiry) {            this.store.delete(key);            return undefined; // caducado        }        return entry.data;    }

    has(key: string): boolean {        return this.get(key) !== undefined;    }

    clear(): void {