Em aplicações modernas, cada milissegundo de latência pode impactar a taxa de conversão, o engajamento e até o SEO do seu site. O cache atua em várias camadas para:

  • 🚀 Reduzir o tempo de carregamento
  • 🌐 Melhorar a experiência do usuário
  • 📊 Diminuir custo de requisições ao servidor
  • 📈 Elevar o ranqueamento em buscadores

Mas nem todo cache é igual: algumas técnicas se aplicam a qualquer app React puro, enquanto outras só fazem sentido em um framework com renderização no servidor como o Next.js. A seguir, aprofundamos cada estratégia, demonstrando quando, onde e por que usá‑las.

1. Cache de Assets no Navegador

O que é?

Armazenamento de arquivos estáticos (JS, CSS, imagens) pelo navegador, evitando downloads repetidos.

Onde usar?

  • React puro: configure no servidor de hospedagem (Nginx, Vercel, Netlify).
  • Next.js: pode customizar via next.config.js ou confiar nos headers padrão que já vêm otimizados.

Como funciona?

  1. Cache-Control define políticas:
  2. "public, max-age=31536000, immutable" → 1 ano de cache, sem revalidação.
  3. Hash nos filenames (Webpack/Next.js) garante invalidação automática ao mudar o conteúdo.

Situações ideais

  • Versões de produção de SPAs React: evita recarregar o bundle inteiro.
  • Páginas Next.js: acelera assets de runtime ("/_next/static/...").

Vantagens e Desvantagens

Vantagens
  • Menos tráfego de rede após o primeiro acesso
Desvantagens
  • Se esquecer de versionar o arquivo, usuários podem ficar com versão obsoleta

2. Memoização de Componentes (React‑Only)

O que é?

Armazenar o resultado de renderizações para evitar trabalhos desnecessários.

Ferramentas principais

  • React.memo: componente só renderiza quando props mudam (comparação rasa).
  • useMemo: memoiza valores computados caros.
  • useCallback: memoiza funções para não quebrar React.memo em filhos.

Para aprofundar um pouco mais sobre esses e outros Hooks, visite o nosso post: Hooks de Performance no React: Entendendo useEffect, useCallback e useMemo

Onde usar?

  • React puro e em projetos Next.js (é React). Mas não se aplica a camadas de servidor/SSG.

Situações ideais

  • Listas grandes onde cada item é pesado de renderizar.
  • Componentes que recebem objetos/funções estáveis como props.

Vantagens e Desvantagens

Vantagens
  • UI mais responsiva, menos reconciliation
Desvantagens
  • Pode ocultar problemas de design se usado sem medição

3. Cache de Dados no Cliente

3.1 SWR (Stale‑While‑Revalidate)

O que é?

Biblioteca da Vercel que retorna dados rápidos do cache e revalida em background.

Onde usar?

  • React puro: excelente para SPAs de dados.
  • Next.js: ideal em páginas CSR ou componentes que buscam dados após o load inicial.

Principais parâmetros

  • "dedupingInterval": evita fetch múltiplo em X ms.
  • "refreshInterval": polling periódico.
  • "revalidateOnFocus": traz dados frescos ao focar a aba.

Situações ideais

  • Dashboards com dados que podem estar ligeiramente desatualizados por alguns segundos.
  • Componentes que aparecem em múltiplas páginas (cache compartilhado).

3.2 React Query

O que é?

Solução completa de gerenciamento de estado de servidor: queries, mutations, cache por “key”.

Onde usar?

  • React puro e Next.js, especialmente quando há muitas operações de escrita (POST/PUT).

Principais parâmetros

  • "staleTime" e "cacheTime": definem frescor e vida do cache.
  • "refetchOnWindowFocus" / "refetchOnMount": controlam re-buscas automáticas.

Situações ideais

  • Apps complexos com CRUD intenso.
  • Necessidade de invalidar cache manual após mutations.

Vantagens e Desvantagens (SWR vs React Query)

swr vs react query

4. Cache e Revalidação no Next.js

4.1 Static Site Generation (SSG)

O que é?

Pré-renderização de HTML em build time.

  • Cache: HTML + JSON servidos do CDN até novo deploy.

Onde usar?

  • Next.js: só disponível em frameworks com build e roteamento de servidor.
  • React puro: não existe nativamente; você precisaria de plugins estáticos ou SSR manual.

Situações ideais

  • Blogs, landing pages, documentação — conteúdo raro de mudar.

4.2 Incremental Static Regeneration (ISR)

O que é?

SSG com revalidação automática após X segundos, sem rebuild total.

export async function getStaticProps() {
  return { props: {...}, revalidate: 120 };
}

Onde usar?

  • Next.js exclusivamente.

Situações ideais

  • Catálogo de produtos: estoque ou preço mudam, mas podem ficar “stale” por 2 minutos.
  • Listagens de notícias com atualização periódica.

4.3 Server‑Side Rendering (SSR) com Cache‑Control

O que é?

Renderiza no servidor a cada requisição, mas usa headers para cache em edge/CDN.

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 'public, s-maxage=5, stale-while-revalidate=55');
  return { props: {...} };
}

Onde usar?

  • Next.js exclusivamente.

Situações ideais

  • Páginas de últimas notícias, cotações ou dashboards administrativos que mudam com alta frequência (<10 s).

4.4 API Routes com Cache

O que é?

Roteadores de API no Next.js que podem servir respostas cacheadas.

export default function handler(req, res) {
  res.setHeader('Cache-Control', 'public, max-age=30');
  res.json(data);
}

Onde usar?

  • Next.js exclusivamente.

Situações ideais

  • Endpoints de lista de itens que não mudam a cada requisição (ex.: categorias, metadados).

5. Resumo de Quando Usar Cada Tipo de Cache

resume cache

6. Boas Práticas Finais

  1. Meça antes e depois: use Lighthouse, Web Vitals e React Profiler.
  2. Combine técnicas: cada rota pode (e deve) ter sua estratégia de cache.
  3. Evite over‑memoization: só memoize componentes realmente custosos.
  4. Use hashing de arquivos: invalidação automática em cache de assets.
  5. Documente sua estratégia: deixe claro na equipe o TTL (time‑to‑live) de cada camada de cache.

7. Conclusão

Dominar o cache em múltiplas camadas — do navegador ao servidor — é o diferencial entre uma aplicação lenta e uma ultra‑responsiva. Entenda suas necessidades, escolha as ferramentas certas e implemente políticas de cache robustas para garantir:

  • ⚡ Performance de alto nível
  • 🌐 SEO otimizado
  • 💰 Redução de custos de infraestrutura

Com este conhecimento, sua aplicação em React ou Next.js estará pronta para escalar e impressionar usuários e motores de busca!