Melhores Práticas de Performance

Um resumo condensado das 25 melhores práticas mais importantes, extraídas de cada página desta seção.

1. Analise Com @next/bundle-analyzer: Torne o tamanho do bundle visível executando o analisador em CI e em builds locais com ANALYZE=true; lembre-se que o treemap mostra bytes não comprimidos, então cruze com o tamanho de transferência gzip/brotli no painel Network antes de comemorar vitórias.
2. Proíba Re-exportações de Barrel Files: Arquivos index.ts com export * derrotam silenciosamente o tree-shaking mesmo em módulos ES, a menos que você defina "sideEffects": false em package.json; prefira importações profundas ou marque pacotes como sem efeitos colaterais para que o bundler possa podar código não utilizado.
3. Meça CWV em Produção: Core Web Vitals em modo de desenvolvimento são duas a cinco vezes piores do que em produção devido a código não minificado, avisos de desenvolvimento do React e source maps - sempre defina metas (LCP < 2.5s, INP < 200ms, CLS < 0.1) contra um build de produção.
4. CLS Acumula na Sessão Inteira: CLS é cumulativo em toda a sessão do usuário, então modais, toasts e banners de consentimento que aparecem 30 segundos depois ainda contam - reserve espaço para UI adiada e teste mudanças de layout não apenas durante o carregamento, mas após a primeira pintura.
5. Paralelize Com Suspense Irmão: Cada limite Suspense com seu próprio Server Component assíncrono busca em paralelo automaticamente, então dividir irmãos em limites separados oferece paralelismo sem escrever um Promise.all - um limite de nível superior colapsa isso de volta em um waterfall.
6. Mate N+1 Com Prisma include/select: Iterar uma lista com .map(async row => prisma.x.findUnique(...)) emite uma consulta por linha; colapse para um único JOIN via include/select, e prefira Promise.allSettled quando uma rejeição parcial não deve descartar todos os outros resultados.
7. Sempre Forneça tamanhos Com next/image: Sem sizes, o navegador assume 100vw e baixa a maior variante srcset (geralmente 3840px) para uma miniatura; passe uma string sensível a breakpoints que corresponda ao seu layout e adicione priority apenas à imagem LCP para que a largura de banda seja gasta onde importa.
8. Hospede Fontes Localmente Com next/font: Substitua as tags <link> do Google Fonts por next/font/google (ou next/font/local) para que as fontes sejam enviadas da mesma origem com cabeçalhos de cache imutáveis e métricas de fallback geradas automaticamente que eliminam FOUT e CLS; fontes variáveis economizam cerca de 100 KB em comparação com o carregamento de múltiplos arquivos de peso.
9. Memoize Após Profiling: Use useMemo, useCallback e React.memo apenas após o profiler mostrar um custo real; memoizar prematuramente componentes baratos adiciona sobrecarga de comparação que frequentemente excede o trabalho que economiza.
10. memo É Inútil Com children: Um componente que recebe children (ou uma prop de objeto/função inline) reconstrói esse valor a cada renderização pai, então React.memo nunca encurta o caminho - eleve os children, use o padrão children-wrapper de estado, ou aceite que memo não ajudará ali.
11. Limpe Toda Alocação de Effect: Qualquer useEffect que inicia um fetch, adiciona um listener, define um timer, abre um WebSocket ou inicializa uma biblioteca de gráficos deve retornar uma limpeza; Strict Mode's double-mount expõe limpeza ausente em vez de causá-la, e intervalos/listeners vazados retêm todo o estado do componente via closure.
12. Cancele Fetches Com AbortController: Conecte cada fetch iniciado por effect a um AbortController e chame abort() na limpeza, para que mudanças de dependência ou desmontagens não deixem respostas antigas sobrescrevendo estados mais recentes ou bloqueando a GC de grandes payloads JSON.
13. Conheça as Quatro Camadas de Cache: Next.js tem Memoização de Requisição (por renderização), Cache de Dados (fetch entre requisições), Cache de Rota Completa (HTML pré-renderizado) e Cache do Roteador (memória do cliente); qualquer chamada a cookies()/headers() ou cache: "no-store" desabilita o Cache de Rota Completa para toda a rota, então isole esse código em seu próprio filho Suspense.
14. Cacheie Chamadas de DB Com unstable_cache: O Cache de Dados apenas envolve a API Fetch, então chamadas Prisma/Drizzle o contornam - envolva-as em unstable_cache(fn, keyParts, { tags, revalidate }) com partes de chave descritivas únicas, e lembre-se que revalidatePath("/x") não afeta rotas filhas a menos que você passe "layout".
15. Execute Lighthouse Com Mediana: Execuções únicas do Lighthouse variam de 10 a 15 pontos em infraestrutura CI compartilhada, então execute pelo menos três vezes (numberOfRuns: 3) e compare a mediana; defina limites de CI mais baixos do que seus números de produção local para evitar falhas instáveis.
16. Profile Apenas Builds de Produção: O React DevTools Profiler em dev é 2-5x mais lento que em produção devido a avisos exclusivos de dev e caminhos do reconciliador; construa com NODE_ENV=production, use react-dom/profiling, feche a aba Components durante a gravação, e compare actualDuration vs baseDuration para ver se a memoização está realmente valendo a pena.
17. Coloque o Estado em Colocação e Use o Padrão Children: Mova o estado para o menor componente que realmente o utiliza e passe a subárvore estática como children para um wrapper que possui o estado; children são criados no escopo do pai, então o wrapper com estado pode re-renderizar sem re-renderizar a árvore estática - nenhum memo é necessário.
18. Divida Contextos por Preocupação: Um único contexto que carrega estado e dispatch re-renderiza cada consumidor em qualquer mudança; divida em contextos separados (estado vs ações) ou use Zustand/useSyncExternalStore para que assinantes de granularidade fina re-renderizem apenas quando sua fatia específica mudar.
19. Deixe o React Compiler Memoizar: Habilitar experimental.reactCompiler: true (mais babel-plugin-react-compiler) insere memoização mais granular do que useMemo/useCallback/memo escritos manualmente - adote o compilador antes de remover a memoização manual para que você nunca deixe uma lacuna onde nada está memoizado.
20. Mantenha o Render Puro para o Compilador: O compilador assume que o render é determinístico e livre de efeitos colaterais, então logs, Date.now()/Math.random() durante o render, ou leituras de globais mutáveis param de disparar ou cacheiam valores antigos - use useSyncExternalStore para fontes mutáveis externas.
21. Empurre "use client" para as Folhas: Adicionar "use client" em um layout contamina toda a subárvore e adiciona 100+ KB de JS de hidratação; mantenha a diretiva no menor leaf interativo e passe Server Components através de children para wrappers de Client Component como <ThemeProvider>.
22. Passe Props Serializáveis Através da Fronteira: Datas, Maps, Sets, instâncias de classe e callbacks não podem cruzar a fronteira Servidor→Cliente de forma limpa - converta datas em strings ISO e substitua callbacks por Server Actions; também nunca importe fs, prisma ou outros módulos somente de servidor dentro de um arquivo "use client".
23. Selecione Com useShallow em Zustand: useStore(s => s) se inscreve em toda a store, e useStore(s => ({ a: s.a, b: s.b })) cria um novo objeto a cada atualização causando re-renderizações espúrias; envolva com useShallow de zustand/react/shallow para comparar propriedades em vez de identidade.
24. Stream Com Suspense Granular: Coloque um limite Suspense por seção lógica da UI com um esqueleto que corresponda às dimensões do conteúdo final (para manter CLS em zero), e emparelhe cada limite com um error boundary para que uma seção falha não derrube a página inteira - evite tantos limites minúsculos que a UI "apareça" incoerentemente.
25. Forçe Orçamentos de Bundle em CI: Adicione orçamentos de tamanho de bundle à construção (Webpack performance.hints: "error", size-limit, ou diff do output de analyze do Next.js contra main) para que regressões falhem a construção em vez de serem enviadas silenciosamente; emparelhe isso com uma verificação Lighthouse CI para que tanto bytes quanto métricas percebidas pelo usuário restrinjam merges.