Astro vs Next.js: qual escolher para um site de marketing ou um produto em 2026

Qual você deve escolher?

Escolha Astro quando a maioria das páginas for igual para todos os visitantes: um site de marketing, um blog, documentação, um site em vários idiomas. Escolha Next.js quando o projeto for sobretudo um produto com login, com painéis, editores, contas e telas que guardam estado no navegador. A linha divisória é quanto do site se comporta como um aplicativo, não quantas páginas ele tem.

Construímos com os dois, por meio dos nossos serviços de desenvolvimento em Astro e de desenvolvimento em Next.js, e usamos ambos em produção: o dardo.studio é um site em Astro, e os front ends da Hyper e da A medio tono são Next.js 16 em Cloudflare Workers. Qualquer um dos frameworks pode fazer o trabalho do outro. O que muda é o ponto de partida de cada um e quanto custa se afastar dele. Os fatos abaixo são de outubro de 2026.

Dois pontos de partida diferentes

O Astro parte do HTML. Páginas, rotas e endpoints são pré-renderizados em tempo de build por padrão, e uma rota que precisa de servidor opta por sair por conta própria, com uma linha de código e um adaptador. Os componentes são renderizados para HTML e o JavaScript deles é removido, a menos que você marque um como ilha de cliente que carrega de imediato, quando o navegador está ocioso ou quando entra na tela com o scroll (documentação do Astro). As ilhas podem ser escritas em React, Preact, Svelte, Vue ou Solid, e as server islands deixam um trecho lento ou pessoal, como o menu da conta, ser renderizado à parte sem atrasar o resto da página.

O Next.js parte de uma aplicação React. No App Router, layouts e páginas são Server Components por padrão e tudo que é interativo é um Client Component, marcado com a diretiva use client. Na primeira visita o navegador recebe o HTML, depois o payload RSC que o React usa para reconciliar as árvores do servidor e do cliente, e então o JavaScript que hidrata as partes interativas (documentação do Next.js). Com o Next.js 16.4, lançado em 6 de outubro de 2026, a equipe recomenda o Cache Components para todo aplicativo: projetos novos já vêm com ele, e ele vira o padrão no Next.js 17. Uma página pode então combinar uma estrutura pré-renderizada, seções em cache e seções renderizadas a cada requisição.

A diferença prática: no Astro, o JavaScript é algo que você acrescenta, um componente por vez. No Next.js, o React e o roteador de cliente acompanham cada página, e o trabalho é manter o seu próprio código fora do bundle. Uma regra pega as equipes de surpresa: a partir do momento em que um arquivo é marcado com use client, tudo o que ele importa também vai para o navegador.

O que medimos nos nossos próprios sites

Em 14 de outubro de 2026 baixamos páginas de sites que construímos e somamos o JavaScript que cada uma carrega na chegada, antes de o visitante clicar em qualquer coisa: o tamanho compactado com gzip de cada arquivo de script, sem contar o beacon de análise da Cloudflare. O Next.js pode pré-carregar mais conforme os links entram na tela; isso não contamos.

Na web como um todo, as médias se distanciam mais que os nossos dois sites: nosso relatório de velocidade de plataformas web mostra quantos sites em Astro e em Next.js são aprovados nas Core Web Vitals com visitantes reais, e quanto JavaScript cada um envia, por país.

Os 43 KB do dardo.studio cobrem nossos próprios scripts pequenos para o tema, os menus e o painel de preferências de análise, uma biblioteca de transição de páginas e a biblioteca web-vitals do Google para as nossas medições de campo; nenhum framework de UI chega ao navegador. A biblioteca do PostHog, cerca de 96 KB a mais, começa depois que a página carregou, e não começa para os visitantes que recusam a análise.

O artigo da A medio tono é pré-renderizado e servido do cache da Cloudflare, então o servidor quase não trabalha; todo o peso está no navegador. Cerca de 121 KB correspondem aos dois arquivos que guardam o React DOM e o runtime de cliente do Next.js; o resto são os componentes e bibliotecas do próprio site. O payload RSC é uma cópia serializada da página renderizada que o React usa no navegador, muitas vezes maior que os cerca de 14.000 caracteres de texto que uma pessoa realmente lê.

Isto não é um benchmark. Os sites têm recursos diferentes, e o afinador e o metrônomo da A medio tono são ferramentas interativas em que uma base de código em React se justifica. O que ele mostra é onde cada framework coloca o peso por padrão: o Next.js compra navegação no cliente e uma única base de código em React, e uma página feita sobretudo de texto não precisa de nenhuma das duas. Na Hyper, o maior arquivo, cerca de 167 KB, é o próprio three.js; numa página 3D como essa, a biblioteca gráfica pesa mais que o framework. Nosso trabalho de otimização de velocidade de sites parte de medições como estas, não da reputação do framework.

Coleções de conteúdo ou busca de dados

O Astro trata o conteúdo como dados que carrega durante o build. As coleções de conteúdo dão a cada tipo de conteúdo um schema, e uma entrada que o quebra interrompe o build com um erro em vez de chegar a um visitante. Os loaders leem Markdown, JSON ou YAML do repositório, ou buscam dados de um CMS, de um banco de dados ou de uma API. O Astro recomenda coleções em tempo de build sempre que possível e reserva as coleções ao vivo para dados que precisam estar atualizados a cada requisição.

O preço desse modelo é um novo build. No dardo.studio um artigo vai ao ar de dois a três minutos depois que um editor o publica, porque o site é reconstruído a partir do CMS. Isso serve para artigos e páginas de serviços; níveis de estoque ou preços que mudam ao longo do dia pertencem a rotas sob demanda.

O Next.js busca dados dentro dos Server Components, de onde quer que estejam, e o cache é uma decisão escrita no código. Com o Cache Components, use cache marca uma função ou um componente como armazenável em cache, cacheLife define por quanto tempo ele fica fresco e cacheTag o rotula para que possa ser atualizado quando o conteúdo muda (documentação do Next.js). Dois detalhes dessa documentação importam para sites de marketing:

• Os caches pertencem a um deploy. Resultados em cache não passam para um deploy novo, então tudo o que é guardado em cache durante as requisições é calculado de novo depois de cada lançamento.
• Alguns crawlers recebem uma renderização na requisição. Quando os metadados de uma página são dinâmicos, o Next.js detecta certos bots pelo user agent e renderiza a página na hora para eles; uma fonte de dados que só funciona durante o build pode mandar a esses bots um erro 500.

O CMS por trás de qualquer um dos frameworks molda o dia a dia dos editores mais do que o framework; nosso serviço de desenvolvimento de CMS headless e nossa comparação de Sanity, Contentful e Payload cobrem essa escolha.

Hospedagem e custo de operação

Um site Astro totalmente pré-renderizado é uma pasta de arquivos que qualquer servidor estático consegue servir. No Cloudflare Workers, as requisições a recursos estáticos são gratuitas e ilimitadas (documentação da Cloudflare), então a linha de hospedagem de um site de marketing pode ser zero. Rotas renderizadas sob demanda precisam de um adaptador; o Astro mantém adaptadores oficiais para Cloudflare, Netlify, Vercel e Node. O dardo.studio é estático nos Workers, exceto a pré-visualização de rascunhos do CMS, que um Worker renderiza sob demanda; a Superame, um ranking público com pagamentos verificados que construímos, roda Astro 7 em modo servidor na Vercel com um banco de dados Postgres.

O Next.js oferece todos os recursos quando roda como servidor Node.js ou em um contêiner Docker; uma exportação estática roda em qualquer lugar, mas perde tudo o que precisa de servidor (documentação do Next.js). Em outubro de 2026, os adaptadores verificados, que passam por toda a suíte de testes de compatibilidade do Next.js, são Vercel e Bun. Cloudflare e Netlify estão construindo adaptadores verificados e, enquanto isso, oferecem suas próprias integrações, cujo suporte a recursos pode variar, então confira cada recurso de que você depende.

Nossos dois sites em Next.js rodam em Cloudflare Workers via OpenNext; a A medio tono foi para lá saindo da Vercel em 30 de setembro de 2026. O plano pago dos Workers começa em USD 5 por mês com 10 milhões de requisições incluídas e sem cobrança de largura de banda. Onde quer que um app Next.js rode, uma rota renderizada a cada requisição custa processamento em toda visita, e é por isso que a 16.4 trouxe o ensureStatic, uma configuração que faz o build falhar quando um componente dinâmico se infiltra numa página que devia continuar estática. Nossa página de desenvolvimento em Next.js detalha as faturas da Vercel e da Cloudflare.

Atualizações e janelas de suporte

O Next.js lança uma versão principal nova todo mês de outubro desde 2021 e publica uma política de suporte por escrito: a versão principal atual fica em Active LTS, e a anterior recebe correções críticas e atualizações de segurança por dois anos a partir do primeiro lançamento. O Astro anda mais rápido e dá menos suporte: o Astro 7 saiu em 22 de junho de 2026, cerca de três meses depois do Astro 6, e a equipe principal oferece correções de segurança para apenas uma versão principal anterior, sem data de término publicada (documentação do Astro).

Um site Astro estático que perde uma atualização continua servindo os mesmos arquivos, e nenhum código de servidor roda quando um visitante chega. Um app Next.js executa código de servidor em toda requisição que não sai do cache, então seus lançamentos de segurança precisam ser aplicados rápido. Em dezembro de 2025, uma falha nos React Server Components, avaliada em CVSS 10.0, deixou apps Next.js 15 e 16 com App Router abertos a execução remota de código; não havia contorno, só atualizar (Next.js). Defina um responsável pelas atualizações; nossos planos de manutenção de sites as incluem.

Ecossistema e a equipe que você tem

O Next.js tem o ecossistema maior por uma margem ampla. Na semana de 6 a 12 de outubro de 2026, o npm registrou cerca de 67,5 milhões de downloads do next e 7,3 milhões do astro (npm), uma proporção de nove para um, e cerca de 188 milhões do próprio react. Os downloads incluem builds automatizados, então use-os como uma medida aproximada do tamanho do ecossistema. O Next.js é React de ponta a ponta, então toda biblioteca de React e todo desenvolvedor que conhece React estão à disposição dele.

O Astro pede menos de uma equipe. Seus componentes são parecidos com HTML, a documentação diz que qualquer pessoa que conhece HTML consegue escrever um, e componentes React continuam funcionando dentro dele como ilhas. O Next.js pede que a equipe entenda onde cada trecho de código roda: quais componentes são de servidor ou de cliente, quais props podem passar entre eles e qual regra de cache vale para cada leitura. Esse conhecimento compensa quando você está construindo um produto. Quando o trabalho é publicar páginas, é peso extra.

Uma tabela para decidir

Quando a resposta são os dois, ou nenhum

Uma empresa de SaaS também pode usar os dois: o site de marketing em Astro no www e o produto em Next.js no app, cada um publicado no seu próprio ritmo. Uma única base de código em Next.js funciona melhor quando uma só equipe pequena é dona de tudo e quer um único conjunto de componentes. Projetar o lado de marketing dessa divisão é o nosso serviço de site para SaaS, e definir o escopo do produto é desenvolvimento de aplicativos web.

Às vezes a resposta é nenhum. Se o seu time de marketing precisa montar e reorganizar páginas visualmente, toda semana, sem pedir nada a um desenvolvedor, um framework com um CMS headless vai parecer lento para ele, por mais rápido que as páginas carreguem. Nossa comparação de Webflow e Framer cobre esse caminho.

Como decidimos em um projeto

Listamos cada rota e a marcamos como igual para todos, mudando conforme o conteúdo é publicado, ou diferente para cada visitante. Se o último grupo estiver vazio ou tiver um punhado de rotas, como uma pré-visualização de rascunhos, uma página de busca ou o retorno de um pagamento, construímos em Astro. Se o produto com login é o motivo do projeto, construímos em Next.js e mantemos estáticas as rotas de marketing desde o primeiro commit.

Se você vai mover um site existente, nosso guia para migrar do WordPress para o Astro cobre a migração mais comum, e o nosso serviço de desenvolvimento web cobre as construções em que o framework ainda está em aberto. Se quiser uma segunda opinião, envie sua lista de rotas e diremos qual framework escolheríamos e por quê.