Prefetch em Sistemas de Alta Demanda

Técnicas de prefetch voltadas não apenas para assets (como em tipos-de-prefetch), mas para dados pesados vindos de APIs. Essencial para percepção de velocidade em aplicações de dados massivos.

O problema da Alta Demanda

Em sistemas complexos (dashboards, e-commerces, relatórios, feeds infinitos), buscar dados apenas quando o usuário exige (on-demand) causa telas de loading constantes. O maior gargalo é a latência da rede. O prefetch resolve isso ao antecipar os dados.

Principais Estratégias

1. Prefetch Baseado em Intenção (Intent-driven)

Em vez de pré-carregar na inicialização, reaja a dicas comportamentais de que o usuário irá solicitar uma ação em breve.

• Hover (onMouseEnter): Quando o mouse passa sobre um link/botão (“Ver Detalhes”), há cerca de 200–300ms até o clique real.
• Focus (onFocus): Para usuários navegando via teclado.

// Exemplo conceitual com React Query
function ProductLink({ id }) {
  const queryClient = useQueryClient();

  const prefetchData = () => {
    queryClient.prefetchQuery({
      queryKey: ['product', id],
      queryFn: () => fetchProductDetails(id),
      staleTime: 60000, // Mantém os dados "frescos" por 1 minuto
    });
  };

  return (
    <Link href={`/product/${id}`} onMouseEnter={prefetchData}>
      Ver Produto
    </Link>
  );
}

2. Paginação e Scroll Infinito Antecipado

Nunca espere o usuário chegar na página 2 para requisitar a página 2.

• Paginação Tradicional: Se o usuário está lendo a página atual, faça o prefetch silencioso da “Próxima”.
• Scroll Infinito: Use Intersection Observer para engatilhar a requisição quando faltarem X pixels para o final da tela, evitando engasgos.

⚠️ Armadilhas do Prefetch em Massa

Prefetch mal implementado vira um efeito rebote:

• Ataque DDoS Acidental: Fazer prefetch de todos os links de uma lista de 100 itens simultaneamente vai derrubar o servidor.
• Desperdício de Banda: Em conexões 3G/4G, baixar megabytes de JSON que nunca serão usados atrasa requisições críticas atuais e gasta os dados móveis do usuário.
• Memory Leaks / OOM (Out of Memory): Caches gigantes no navegador sem política de expiração podem crashar a aba.

Boas Práticas (Checklist)

• [ ] Apenas faça prefetch do que é altamente provável de ser acessado.
• [ ] Use bibliotecas maduras (React Query, SWR) que gerenciam desduplicação e cache automaticamente.
• [ ] Ajuste o staleTime corretamente para evitar buscar os mesmos dados várias vezes.

Relacionadas: tipos-de-prefetch · react-performance · react-code-splitting