Estratégias de Cacheamento
HTTP cache, React Query staleTime, Next.js fetch cache. Diferentes TTLs por tipo de dado.
Definição
Cacheamento em camadas: CDN/HTTP (Cache-Control headers) para responses do servidor. Next.js fetch cache (revalidate) no Node. React Query / SWR no cliente. Dados estáticos (config, categorias) aguentam cache longo. Dados de usuário não devem ser cacheados em CDN (sem autenticação no CDN).
Problema → Solução
Problema
Fazer a mesma chamada de API dezenas de vezes por render. Não usar Cache-Control, deixando o browser refazer requests a cada navegação. Ou cache muito agressivo servindo dados desatualizados.Solução
staleTime no React Query por tipo de dado (30s dinâmicos, 10min referência). HTTP Cache-Control para assets estáticos. Next.js revalidate: 60 para páginas semi-estáticas. CDN só para conteúdo público, nunca para dados autenticados.Dica de entrevista
Tip
Regra prática: cache agressivo para dados que mudam raramente (categorias, config, países), cache curto para dados frequentes (preços, estoque), sem cache CDN para dados de usuário (perfil, carrinho).Código
// React Query com staleTime por tipo
const { data: categories } = useQuery({
queryKey: ['categories'],
queryFn: fetchCategories,
staleTime: 10 * 60_000, // 10 min — muda raramente
})
const { data: prices } = useQuery({
queryKey: ['prices'],
queryFn: fetchPrices,
staleTime: 0,
refetchInterval: 5000, // polling — muda sempre
})
// Next.js fetch cache no servidor
const config = await fetch('/api/config', {
next: { revalidate: 3600 } // ISR: revalida a cada 1h
})
const fresh = await fetch('/api/user-data', {
cache: 'no-store' // SSR: sempre fresco
})Perguntas de entrevista
Q.O que é staleTime no React Query?▾
A.Tempo em ms que um dado é considerado fresco. Durante esse período, nova query com a mesma key retorna o cache sem fetch. Após o staleTime, dados ficam stale mas são servidos do cache enquanto refetch acontece em background.
Q.Como invalidar cache após uma mutation?▾
A.queryClient.invalidateQueries({ queryKey: ["users"] }) na callback onSuccess da mutation. Isso marca os dados como stale e dispara refetch automático em todos os componentes que os consomem.
Q.Qual a diferença entre cache e estado?▾
A.Estado de servidor (dados da API) deve ficar no React Query / SWR, não em useState + useEffect. Estado de UI (modal aberto, tab ativa) fica em useState. Misturar os dois em useState causa sincronização frágil.
54/122← →