Cache em TypeScript: acelerando sua aplicação sem dor

Por que sua aplicação está lenta (e como corrigir isso)

Você já esperou a interface ser redesenhada após um clique? Ou observou o servidor responder à mesma requisição várias vezes seguidas? Familiar? Então este artigo é para você. O cache de dados não é apenas uma "boa prática", mas uma habilidade básica de qualquer desenvolvedor TypeScript que deseja que sua aplicação voe, e não rasteje.

Hoje vamos analisar como fazer cache de dados corretamente em TypeScript: desde um cache in-memory simples no frontend até estratégias avançadas com TTL e Redis no backend. Você receberá trechos de código prontos que pode inserir em seu projeto ainda hoje.

O que é cache e por que ele é necessário em TypeScript?

Cache é uma técnica de armazenamento temporário de dados frequentemente usados em um armazenamento rápido. Em vez de buscar dados no banco ou em um servidor remoto toda vez, salvamos o resultado da primeira requisição e o entregamos em acessos repetidos.

As vantagens são óbvias:

• Redução do tempo de resposta (latência) — o usuário recebe os dados em milissegundos
• Diminuição da carga no servidor e no banco de dados
• Economia de tráfego e recursos
• Possibilidade de trabalhar offline (para frontend)

Em TypeScript, graças ao sistema de tipos, podemos escrever um cache seguro e previsível que não quebrará em tempo de execução. Vamos ver como fazer isso.

Estratégias de cache: escolhendo a abordagem correta

Antes de escrever código, é preciso entender qual estratégia você usará. Disso depende a eficácia da sua solução.

1. Cache In-Memory (cache em memória)

A opção mais simples e rápida. Os dados são armazenados em uma variável, Map ou objeto. Ideal para frontend e aplicações Node.js pequenas.

Desvantagem: os dados são perdidos ao recarregar a página ou reiniciar o servidor.

2. LocalStorage / SessionStorage (cache no navegador)

Adequado para frontend quando é necessário salvar dados entre sessões. Ideal para configurações do usuário, tokens e cache de respostas de API.

Desvantagem: acesso síncrono, limite de tamanho (5-10MB).

3. Redis (cache no servidor)

Padrão industrial para backend. Rápido, confiável, com suporte a TTL e estruturas de dados complexas. Funciona bem com Node.js através da biblioteca ioredis.

Desvantagem: requer um serviço separado (servidor Redis).

4. Service Worker + Cache API (PWA)

Cache avançado para Progressive Web Apps. Permite interceptar requisições de rede e entregar respostas em cache. Ideal para modo offline.

Escrevendo cache em TypeScript: do simples ao complexo

Agora vamos à prática. Mostrarei várias implementações, da básica à avançada, usando genéricos do TypeScript.

Cache In-Memory Simples com TTL

Vamos começar com o clássico — cache em memória com remoção automática de entradas expiradas.

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

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

    constructor(private defaultTTL: number = 60000) {} // 60 segundos por padrão

    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; // expirado        }        return entry.data;    }

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

    clear(): void {