Escolher a stack e projetar suas dependências

Trocar de base depois de vinte telas prontas reescreve o site inteiro. Conteúdo que se lê pede Astro, aplicativo que se opera pede Next.js e arquivo que abre sozinho pede HTML puro.

A base é o framework, a fundação pronta do site, como a de uma casa. Ela fica decidida antes do primeiro comando, com o motivo por escrito e o custo de uma troca futura já calculado.

Cinco perguntas decidem a base em meia hora. Tela que reage o tempo todo, com filtro e clique, descarta o HTML puro; página que só se lê descarta o painel completo do Next.js.

A página precisa aparecer no Google e ser citada por assistente de IA, ou precisa abrir de um arquivo sem servidor. Quem cuida dela daqui a um ano, com qual tecnologia, e quanto JavaScript o celular do cliente aguenta sem travar completam o critério.

Astro entrega HTML pronto e só manda JavaScript ao navegador nos pedaços marcados, chamados de ilhas, como a vitrine com uma única TV ligada. Da linha 6 vieram coleções de conteúdo ao vivo, API de fontes nativa, política de segurança de conteúdo embutida e Cloudflare Workers de primeira classe.

A versão estável em 8 de setembro de 2026 é a 7.3.2, publicada naquele mesmo dia, então reconfira o número antes de fixá-lo no projeto. É a escolha para blog, documentação, site institucional, microsite e relatório estático.

O erro típico é marcar toda ilha para carregar de imediato: o site vira um site comum de React e descarta o motivo de ter escolhido o Astro. O catálogo de uma escola, que só lista curso, turma e formulário de matrícula, é o caso limpo. Sem nada que mude a cada minuto, o Next.js entregaria build, servidor e manutenção que ninguém pediu.

Next.js monta a página com login, painel e dado que muda a cada minuto. A linha 16.3 usa o Turbopack por padrão em desenvolvimento e build, gasta até 90% menos memória em sessão longa e aceita TypeScript 7 na checagem de tipos.

A referência reproduzível em setembro de 2026 é a 16.3.4, de 31 de agosto de 2026, que reativou a otimização de imagem AVIF quebrada na 16.3.3. O erro típico é escrever "use client" em todo arquivo, mandando o componente para o navegador.

Por baixo roda a linha React 19.2, estável na 19.2.8 desde 21 de julho de 2026, com o React Compiler 1.0 estável desde outubro de 2025. O compilador aplica sozinho as otimizações que antes exigiam useMemo e useCallback, hoje exceção. A falha CVE-2025-55182 atinge as versões 19.0.0 a 19.2.2 e pede correção nesta semana.

As outras bases entram por exceção. Entre os três full-stack React, a regra é a migração de origem do time. Quem vem de Remix ou de Create React App segue no React Router v7. Quem quer tipagem máxima olha o TanStack Start, com suporte beta ao Solid 2.0 desde abril de 2026. Quem começa do zero fica no Next.js.

Svelte tem a linha 3 em candidata a lançamento desde agosto de 2026; a 2.x do SvelteKit segue em produção. HTMX fica na 2.0.10, porque a 4.0 em beta quebra atributos, cabeçalhos e eventos, e Alpine.js 3.15 segue estável. Vue, SolidStart, Qwik, Preact e Lit não tiveram major no trimestre, e o Nuxt segue sem confirmação.

Custo de saída (abandonar uma tecnologia já construída) é a pergunta que ninguém faz antes de escolher. As três bases montam a página de jeitos que não se traduzem. No Astro você decide ilha por ilha o que paga JavaScript; no Next.js, qual componente roda no servidor; no Svelte, o dado é buscado ao lado da tela.

Trocar de base depois de vinte telas prontas reescreve onde o dado é buscado, onde o estado mora e qual arquivo manda em cada rota. Uma proposta de troca sem o número de telas reescritas por escrito é uma proposta incompleta.

Quando conteúdo e painel convivem no mesmo negócio, use os dois: Astro no site público e Next.js no painel atrás do login. Os dois importam o mesmo arquivo de tokens (cor e tipografia guardadas com nome), e é a divisão que a Apple faz entre marketing, produto e loja.

Crie o projeto já com TypeScript ativado e um arquivo de tokens antes da primeira tela: trocar a cor da marca inteira passa a exigir uma linha só desse arquivo. Publique a primeira página numa URL pública e confira que o React instalado está acima da versão 19.2.2 antes de aprovar qualquer tela seguinte.

A peça certa em cada camada e a árvore de dependências

Um pacote instalado sem checar pode carregar nome inventado por um modelo de IA e virar porta de ataque. Cada camada do frontend tem uma peça padrão, e o que ela arrasta junto se confere antes de instalar.

Quem aprova o que um agente sugere instalar decide a peça de cada camada e o plano B sem biblioteca. Agente é o assistente de IA que escreve código, e a árvore de dependências fica conferida antes do primeiro comando.

Seis camadas já têm dona: Next.js para aplicação e Astro para conteúdo, a única camada em que trocar é reescrever. O estilo é Tailwind v4; vanilla-extract entra quando um token (valor de estilo guardado com nome) errado precisa quebrar o build. O componente é shadcn sobre Radix, copiado para o repositório com teclado e leitor de tela resolvidos.

O ícone é Lucide, e só ele: misturar famílias faz a interface parecer montada por pessoas diferentes. O movimento começa em CSS puro e sobe para Motion só para herdar a velocidade do gesto de puxar uma gaveta. O gráfico é Recharts v3, em SVG com acessibilidade ligada por padrão; painel operacional com milhões de pontos pede ECharts 6.1.

A regra de uma peça por necessidade se vê na loja que ia instalar três pacotes só para um aviso de pedido confirmado, quando o Sonner sozinho já resolvia.

Acima delas ficam as utilidades de interface, cada uma com um degrau abaixo que resolve sem instalar nada. O nuqs guarda aba, filtro e paginação na URL, e não em useState. O teste é copiar o link e abrir em outra aba: se a tela volta diferente, o estado mora no lugar errado.

A partir de algumas centenas de itens entra o TanStack Virtual; abaixo disso, lista comum. O cmdk, o Sonner e o Vaul entregam paleta de comandos, aviso de canto e gaveta inferior, o padrão de fato em stack shadcn.

O Floating UI posiciona menu, dica e balão, e essa camada encolheu. O anchor positioning do CSS entrou em Baseline Newly Available em 13 de janeiro de 2026, com o Firefox 147 fechando o conjunto, e resolve nativamente parte da geometria de dica e menu. Enquanto o seu painel de visitas mostrar navegador anterior, mantenha a biblioteca e garanta uma posição que funcione quando as declarações forem ignoradas.

O number-flow anima um número dígito a dígito na direção certa, como o contador da bomba de combustível. Ele serve ao KPI (o indicador que a diretoria acompanha) que muda ao vivo. Existe para React, Vue, Svelte e vanilla, com porta para React Native desde abril.

Para tour de produto, o driver.js tem cerca de 5 kB em TypeScript e resolve o onboarding simples. O Shepherd.js cobre lógica condicional rica com licença dupla AGPL ou comercial, e AGPL obriga a abrir o seu código ou pagar. O auto-animate anima a mudança de uma lista com uma linha.

O dado que vem do servidor e o estado que só existe na tela moram em lugares diferentes. TanStack Query ou SWR guardam a cópia do servidor em cache (a cópia local que evita pedir o mesmo dado de novo) e cuidam de revalidar.

Zustand ou Jotai cuidam do estado leve da tela com pouco código. Redux Toolkit entra quando cada mudança precisa ficar registrada para auditoria, e RxJS só quando existem fluxos de eventos combinados. Para histórico analítico que sobrevive ao fechar da aba, IndexedDB com stale-while-revalidate mostra o dado de ontem e atualiza por trás.

Tempo real começa em SSE (o servidor empurra e o navegador só ouve, como um rádio). WebSocket só entra em conversa intensa nos dois sentidos e com controle de fila, porque não existe backpressure nativo: sem fila, o cliente lento acumula mensagens até travar.

Para escala, três siglas: BFF (um servidor intermediário por tela), CQRS (leitura separada da escrita) e CDC (captura de cada mudança no banco). Métricas, traces e logs entram via OpenTelemetry desde o primeiro sprint. WebAssembly é acelerador cirúrgico, para layout de grafo, decimação de série e teste de acerto de clique, e nunca substituto do frontend.

Toda biblioteca instalada traz outras dentro dela, e a árvore final fica maior que a lista que você escolheu. Rode npm ls --all e veja o tamanho real antes de confiar. Duas contas saem daí: a de licença, porque uma peça permissiva pode arrastar outra restritiva, e a de segurança, porque cada peça é uma porta.

Um modelo de IA inventa nome de pacote com total confiança, e existe uma classe de ataque que registra justamente esses nomes esperando quem instale sem checar. Antes de aceitar qualquer sugestão, abra a página do pacote no registro npm e confirme que ele existe, com data do último lançamento. Rode npm audit de tempos em tempos.

Antes de aceitar qualquer pacote sugerido, rode npm ls --all para ver a árvore inteira e npm audit para a auditoria. Abra a página de cada um no registro npm e confirme lançamento recente e licença de uso comercial.

Pergunte primeiro se o navegador já resolve. O anchor positioning e a transição de vista no mesmo documento chegaram a Baseline em 2026 e em outubro de 2025, e tiram bibliotecas da lista sem instalar nada.