Decisões de Arquitetura Front-end

Como Tech Lead ou Engenheiro Sênior, as entrevistas frequentemente focam no seu processo de tomada de decisão técnica. Aqui estão respostas estruturadas para perguntas arquiteturais comuns baseadas nas suas experiências reais.

1. Renderização: SSR vs CSR

A escolha entre Server-Side Rendering (SSR) e Client-Side Rendering (CSR) não é absoluta, depende dos requisitos do produto:

SSR (Server-Side Rendering / Next.js): Escolha o SSR se a aplicação precisa de forte SEO (e-commerces, blogs), se possui rotas públicas pesadas que exigem um First Contentful Paint (FCP) rápido, ou se você deseja mascarar tráfego de dados e chaves sensíveis executando requisições no servidor.
CSR (Client-Side Rendering / React SPA): É a melhor opção quando a aplicação exige alta interatividade por parte do usuário (como dashboards complexos, painéis administrativos com muitos filtros) e onde os dados mudam em tempo real e não dependem de SEO. Uma vez que o JavaScript é carregado, a navegação entre rotas é instantânea.

2. Micro-frontends (Module Federation)

Se perguntado sobre como escalar grandes aplicações com múltiplas equipes, os Micro-frontends são a resposta ideal.

Por que usar: Permite que diferentes squads desenvolvam e façam deploy de forma independente, sem bloquear uns aos outros e sem conflitos massivos de código.
Como gerenciar estado/roteamento: Para evitar forte acoplamento entre os micro-frontends, crie um orquestrador no navegador. Utilize emissão de eventos nativos (Custom Events da API do Browser) para compartilhar estados globais simples, como login de usuário ou rotas ativas.

3. Performance em React e Gerenciamento de Memória

Quando os entrevistadores perguntam sobre “aplicação lenta onde os requests de rede estão rápidos”, o foco é o processamento no DOM.

Diagnóstico: A primeira ferramenta a ser usada deve ser o React Profiler (ou aba Performance do Chrome) para rastrear o uso de memória e identificar quais componentes estão renderizando sem necessidade.
Solução: Use React.memo para memorizar posições estáticas na árvore do DOM que não deveriam atualizar, e useMemo para evitar re-cálculos pesados (matemática ou parsing de arrays). Além disso, aplique Code Splitting (com React.Suspense e imports dinâmicos) para separar os arquivos e não sobrecarregar a memória inicial do browser com views que o usuário não está acessando no momento.

Relacionadas: entrevistas-moc · entrevista-live-coding