Como criar um sistema de cache agressivo para APIs

8 min de leitura

Implementando cache inteligente que reduz drasticamente o número de chamadas para APIs externas, melhorando performance e experiência do usuário.

Next.jsCachePerformanceAPI

Como criar um sistema de cache agressivo para APIs#

Recentemente implementei um sistema de cache para a API do Spotify no meu portfólio que reduziu de 60 chamadas/hora para apenas 5-15 chamadas/hora. Vou te mostrar como fazer isso!

O Problema#

APIs externas têm limitações de rate limiting e cada chamada adiciona latência. No meu caso, o widget do Spotify estava fazendo muitas requisições desnecessárias.

A Solução: Cache Inteligente#

1. Cache em Memória no Servidor#

// In-memory cache interface
interface CacheItem<T> {
  data: T;
  timestamp: number;
  ttl: number;
}

const cache = new Map<string, CacheItem<any>>();

const getCachedData = <T>(key: string): T | null => {
  const cached = cache.get(key);
  if (cached && Date.now() - cached.timestamp < cached.ttl) {
    return cached.data;
  }
  cache.delete(key); // Remove expired
  return null;
};

2. TTL Baseado no Estado#

// Playing tracks: 2 minutes cache
// Paused tracks: 5 minutes cache
// Recently played: 10 minutes cache

const cacheTtl = currentlyPlaying.is_playing ? 120000 : 300000;
setCachedData(cacheKey, responseData, cacheTtl);

3. Fallback para Dados Expirados#

catch (error) {
  // Try to return stale cached data when API fails
  const staleData = cache.get(cacheKey);
  if (staleData) {
    console.log("Returning stale data due to API error");
    return NextResponse.json(staleData.data);
  }
}

Headers HTTP Agressivos#

// More aggressive HTTP cache
const cacheTime = currentlyPlaying.is_playing ? 120 : 300; // 2min or 5min
response.headers.set(
  "Cache-Control",
  `public, s-maxage=${cacheTime}, stale-while-revalidate=${cacheTime * 2}`
);

Resultados#

  • Antes: ~60 calls/hour (every minute)
  • Depois: ~5-15 calls/hour
  • Melhoria: 75-90% redução nas chamadas

O sistema agora se adapta inteligentemente ao estado da aplicação!

Próximos Passos#

  1. Implementar Redis para cache distribuído
  2. Adicionar métricas de cache hit/miss
  3. Cache warming strategies

Esse foi um dos projetos mais satisfatórios de implementar. Cache bem feito é invisível para o usuário mas transforma a performance!