Astro vs Next.js: ilhas vs Server Components | We.Inc
O Astro entrega HTML estático com ilhas interativas; o Next.js cria apps React com Server Components. Compare os modos de saída, a interatividade e a hospedagem, e depois teste as suas necessidades.
O Astro renderiza páginas em HTML sem JavaScript no cliente, a menos que você adicione uma ilha com uma client directive, o que o torna uma ótima escolha para sites de conteúdo. O Next.js é um framework React em que as páginas são Server Components por padrão e as partes interativas entram com 'use client', o que combina com produtos no estilo app, com login e muito estado.
Astro e Next.js comparados
Tema
Astro
Saída padrão
HTML estático, pré-renderizado no build
React renderizado no servidor; export estático opcional
Adicione um adapter e depois prerender = false ou output: 'server'
Embutida ao rodar next start
Partes do servidor adiadas
Server islands com server:defer
Renderização no servidor transmitida em streaming para o cliente
Opções de hospedagem
Qualquer host estático, ou adapters para Node.js, Netlify, Vercel, Cloudflare
Servidor Node.js, Docker, export estático ou adapters
Marque as necessidades que descrevem o seu projeto. Cada uma pende para o Astro ou para o Next.js por um motivo explicado, e a contagem abaixo dá uma recomendação inicial, não um veredito final.
Selecione todas as afirmações verdadeiras para o seu projeto.
Leia o motivo que aparece abaixo de cada necessidade selecionada.
Confira a contagem e a recomendação no final.
Use os exemplos de código mais abaixo para ver como cada framework adiciona uma parte interativa.
Sites de conteúdo com alguns widgets são onde o Astro brilha. Toda página continua sendo HTML puro, exceto as ilhas que você marcar.
Use client:visible para widgets abaixo da dobra. O Astro espera a ilha aparecer na tela antes de carregar o JavaScript dela.
No Next.js, empurre o 'use client' o mais fundo possível. Marque a caixa de busca, não o layout inteiro, para manter os bundles do cliente pequenos.
Já tem componentes React? Os dois frameworks podem usá-los. No Astro, instale a integração do React com npx astro add react.
Perguntas frequentes
O Astro pode usar componentes React?
Sim. Depois de npx astro add react, você pode importar um componente React em uma página .astro. Sem uma client directive, ele é renderizado só como HTML estático; adicione client:load ou outra diretiva para torná-lo interativo.
O Astro serve só para sites estáticos?
Não. Com um adapter de servidor instalado, qualquer página pode deixar de ser pré-renderizada com export const prerender = false, ou você pode definir output: 'server' para renderizar todas as páginas por requisição e pré-renderizar só as que escolher.
As ilhas do Astro são o mesmo que React Server Components?
Elas resolvem um problema parecido por lados opostos. O Astro parte de zero JavaScript e você adiciona ilhas interativas. O Next.js parte de React renderizado no servidor e você marca as partes do cliente. Os próprios React Server Components nunca enviam o código deles para o navegador.
Qual é melhor para um blog?
Geralmente o Astro, porque um blog é quase todo texto e imagens que não precisam de JavaScript. O Next.js também lida bem com blogs e é a escolha mais fácil se o blog fica dentro de um app React maior.
Qual é melhor para um dashboard ou app SaaS?
Geralmente o Next.js. Telas com login, formulários, dados ao vivo e estado compartilhado no cliente aproveitam os pontos fortes do React, e os Route Handlers ficam no mesmo projeto.
Como funcionam as ilhas do Astro
Um componente Astro tem um bloco de script no topo que roda só no servidor, e um template abaixo dele. Ele nunca é renderizado no cliente: o resultado é HTML, gerado no build ou por requisição.
Quando uma parte da página precisa reagir a cliques, você coloca um componente de React, Svelte, Vue ou outro framework compatível e dá a ele uma client directive. Só essa ilha carrega JavaScript, e a diretiva decide quando: na hora, quando o navegador fica ocioso, quando ela aparece na tela ou quando uma media query corresponde.
Como funcionam os Server Components do Next.js
No App Router do Next.js, layouts e páginas são Server Components, a menos que você indique o contrário. Eles podem ler bancos de dados e segredos diretamente, e o código deles não é enviado para o navegador.
Adicionar 'use client' a um arquivo marca uma fronteira. Esse arquivo, os imports dele e os componentes que ele renderiza vão para o bundle do cliente e são hidratados, então estado, efeitos e event handlers funcionam ali.
Tomando a decisão
Se a maioria das páginas é lida em vez de usada, comece com o Astro. Se a maioria é usada em vez de lida, ou se a equipe vive no React, comece com o Next.js. Sites mistos costumam rodar o site de marketing em Astro e o app em Next.js em um subdomínio.
Adicionando uma parte interativa em cada um
Página Astro com uma ilha React
O título e o parágrafo saem como HTML puro. Só o LikeButton carrega JavaScript, e só quando aparece na tela.
Página Next.js com um Client Component
A página é um Server Component. O arquivo com 'use client' é a única parte hidratada no navegador.
Renderização por requisição no Astro
Saída de servidor com um adapter Node.js
Rode npx astro add node primeiro. Com output definido como 'server', toda página é renderizada por requisição, a menos que exporte prerender = true.
A maioria das páginas é artigo, documentação ou texto de marketing
Os componentes Astro são renderizados em HTML sem JavaScript no cliente, que é tudo de que uma página de leitura precisa.
Queremos usar componentes Svelte ou Vue junto com React
O Astro aceita React, Preact, Svelte, Vue e SolidJS na mesma página.
A interatividade se limita a alguns widgets
As client directives carregam JavaScript só para essas ilhas, e só quando necessário.
Queremos hospedar em uma hospedagem simples de arquivos estáticos
A saída do Astro é estática por padrão; o export estático do Next.js funciona, mas perde recursos que precisam de servidor.
A maioria das telas fica atrás de um login
Telas com login e muitos dados combinam com o estado do React e com Server Components buscando dados no servidor.
Muitos componentes compartilham estado no cliente
Um app React com context providers e Client Components lida diretamente com estado compartilhado.
Queremos endpoints de API no mesmo projeto
Os Route Handlers ficam ao lado das páginas e rodam sempre que o site roda no servidor Node.js.
Nossa equipe já constrói tudo em React
O Next.js é React de ponta a ponta, então não há um segundo modelo de componentes para aprender.
Qual combina com o seu projeto?
Necessidades do projeto
Astro: {a}, Next.js: {n}
Selecione as necessidades que se aplicam ao seu projeto.
Tende para o Astro.
Tende para o Next.js.
Empate: qualquer um serve, então escolha o que a sua equipe conhece.