O que é Astro? Entenda em 3 minutos o zero JS, a arquitetura de ilhas e o foco em conteúdo

Há algum tempo, criei um blog técnico com Next.js. Quando terminei o código e gerei o pacote, o JavaScript passou direto dos 500 KB. Fiquei sem entender: era apenas um site para publicar artigos, com páginas compostas principalmente por texto e imagens. Por que precisava carregar tanto JS?

Ao abrir o Chrome DevTools, a situação parecia ainda pior: a primeira tela levava 3 segundos para carregar e havia vários avisos de “JavaScript não utilizado”. Comecei a me perguntar se usar React ou Vue em um site de conteúdo não seria como usar equipamento pesado para uma tarefa simples.

Foi então que conheci Astro. A ideia é simples: a maioria dos sites não precisa de tanto JavaScript. Parece radical, não é? Mas, depois de entender a arquitetura, percebi que a proposta faz bastante sentido.

Ao terminar esta leitura, você entenderá os três princípios centrais do Astro — foco em conteúdo, zero JS por padrão e arquitetura de ilhas —, as diferenças fundamentais em relação a frameworks tradicionais como Next.js e React e em quais situações vale ou não vale escolher Astro. Sem abstrações desnecessárias: vamos direto ao ponto.

Primeiro, o peso dos frameworks tradicionais: por que um site estático precisa de 500 KB de JavaScript?

Vamos começar entendendo como uma SPA tradicional, ou aplicação de página única, funciona. Assim fica mais fácil perceber por que ela pode ser tão pesada.

Considere React. Ao acessar um site React, o navegador primeiro carrega todo o runtime do React, cerca de 130 KB. Depois carrega o código da aplicação e realiza a “hydration”, ou hidratação, que transforma o HTML estático renderizado no servidor em componentes interativos. Parece razoável, certo?

Mas surge um problema: se a página apenas exibe um artigo de blog e 90% do conteúdo é texto e imagem sem nenhuma interação, por que carregar tanto JS?

Encontrei um dado impressionante: nos pacotes gerados por frameworks SPA tradicionais, em média 60% dos 500 KB de JS não são utilizados. Grande parte do código que levou 3 segundos para carregar simplesmente fica parada.

Essa é a contradição central: sites de conteúdo e aplicações altamente interativas têm necessidades completamente diferentes. Uma ferramenta de edição colaborativa online precisa de muito JS para processar a colaboração em tempo real, e isso faz sentido. Mas será que uma página que apenas apresenta um produto precisa de um framework tão pesado?

Astro percebeu esse problema e propôs uma ideia ousada: parar de carregar JS por padrão.

Princípio central 1 do Astro: foco em conteúdo (Content-Focused)

“Foco em conteúdo” não significa simplesmente publicar mais conteúdo. É uma filosofia de arquitetura: o núcleo do site é a apresentação do conteúdo, e não uma lógica complexa de aplicação.

Em termos simples, Astro separa os sites em duas categorias:

• Sites de conteúdo: blogs, documentação, sites institucionais, páginas de apresentação de produtos e páginas de produtos de e-commerce
• Aplicações: ferramentas de colaboração online, painéis administrativos, chats em tempo real e formulários complexos

O posicionamento do Astro é claro: ele foi criado para a primeira categoria. Você talvez pense: “Next.js também não serve para fazer blogs?” Serve, mas pode ser uma solução maior do que o problema exige.

Veja um caso real. O China CITIC Bank usou Astro para criar uma plataforma de metadados de nível financeiro. Depois da migração do Next.js, o volume de código JS caiu 90% e o desempenho das páginas melhorou 30%. Não é uma hipótese; é um caso concreto.

Alibaba Cloud - Escolha dos desenvolvedores, 15% de desconto exclusivo em Lighthouse

Ganhar 15% off →Anúncio

"O China CITIC Bank usou Astro para criar uma plataforma de metadados de nível financeiro. Depois da migração do Next.js, o volume de código JS caiu 90% e o desempenho das páginas melhorou 30%."

A lógica do Astro é a seguinte: se o site serve principalmente para apresentar conteúdo — texto, imagem e vídeo —, a maior parte das páginas deve ser HTML estático, com carregamento rápido e bom desempenho em SEO. Apenas as áreas que realmente precisam de interação, como comentários e busca, carregam o JS necessário.

Esse é o verdadeiro significado de “foco em conteúdo”: fazer a arquitetura servir ao conteúdo, em vez de forçar o conteúdo a se adaptar ao framework.

Princípio central 2 do Astro: zero JavaScript por padrão (Zero JS by Default)

Quando ouvi “zero JS por padrão” pela primeira vez, também estranhei: “Um framework moderno sem JS?” Depois entendi que isso significa não enviar JS ao cliente por padrão, mas permitir adicioná-lo sob demanda.

Como funcionam os frameworks SSG ou SSR tradicionais, como Next.js? Primeiro, eles renderizam o HTML no servidor. Depois, enviam ao navegador todo o framework React e o código dos componentes para realizar a hidratação completa. Mesmo que a página exiba apenas um trecho de texto, o runtime do React precisa ser carregado.

Astro adota a abordagem oposta: primeiro gera HTML estático puro, sem nenhum JS por padrão. Quando uma área precisa de interação, você a marca manualmente para informar que aquele componente requer JS.

Uma comparação torna isso bem claro. Para o mesmo site de documentação, um pacote do Next.js começa com cerca de 150 KB de JS. E no Astro? Pode ter apenas 11 KB ou até menos. A pontuação de desempenho no Lighthouse pode chegar a 99.

Alguém pode perguntar: “E se eu quiser adicionar um carrossel de imagens?” É simples: marque esse componente e informe ao Astro que ele precisa de JS. O restante permanece estático.

Essa é a essência do “zero JS por padrão”: não se trata de proibir JS, mas de usá-lo apenas onde ele é realmente necessário. Se uma página tem 10 módulos e 9 são estáticos, somente um deles carrega JS.

Princípio central 3 do Astro: arquitetura de ilhas (Islands Architecture)

O nome “arquitetura de ilhas” pode parecer abstrato, mas o conceito é bastante direto. Pense assim:

Imagine um mar de HTML estático com algumas “ilhas” que precisam de interação.

O mar, formado pelo conteúdo estático, carrega muito rápido e não precisa de JS. Cada ilha, ou componente interativo, carrega de forma independente apenas o JS necessário, sem interferir nas demais. Essa é a arquitetura de ilhas do Astro.

O conceito foi apresentado em 2019 por Katie Sylor-Miller, arquiteta frontend da Etsy, e depois ampliado por Jason Miller, autor do Preact. Astro foi o primeiro framework a levar essa arquitetura efetivamente ao ambiente de produção.

Na implementação técnica, ele usa “hidratação parcial” (partial hydration). Frameworks tradicionais fazem hidratação completa e reconstroem todo o DOM virtual da página. Astro hidrata apenas os componentes marcados como interativos.

Por exemplo, uma página de artigo de blog pode ter estas partes:

• Título e corpo do artigo (estáticos)
• Navegação do sumário (estática)
• Área de comentários (interativa)
• Botão de compartilhamento (interativo)

Um framework tradicional hidrataria toda a página. Astro hidrata apenas a área de comentários e o botão de compartilhamento. O resultado? O TTI, ou tempo até a primeira interação, pode cair 300%.

Astro também oferece algumas “diretivas de hidratação” para controlar com precisão quando o JS deve ser carregado:

• client:load - carrega imediatamente após a página, ideal para interações essenciais
• client:idle - carrega quando o navegador está ocioso, para recursos sem urgência
• client:visible - carrega quando o componente entra na área visível, como carrosséis de imagens e players de vídeo

Cada ilha é renderizada de forma independente e não bloqueia as demais. Se a área de comentários demorar para carregar, o botão de compartilhamento continuará funcionando normalmente. Isso é especialmente útil quando vários componentes carregam em paralelo.

Em resumo, a arquitetura de ilhas leva o carregamento sob demanda ao limite.

Principais diferenças em relação aos frameworks tradicionais: três filosofias para criar sites

A esta altura, a proposta do Astro já deve estar mais clara. Ainda assim, talvez reste a dúvida: “Qual é a diferença em relação a React e Next.js? Qual deles devo escolher?”

Podemos olhar de outro ângulo. Esses frameworks representam três filosofias bem diferentes para criar sites:

KiloClaw - OpenClaw gerenciado para empresas: orquestração de agentes IA e roteamento inteligente

Começar →Anúncio

1. React, Vue ou Svelte puros — filosofia centrada no cliente

A ideia central é tratar o navegador como o ambiente de execução da aplicação e priorizar uma experiência altamente interativa.

• Características: toda a lógica roda no cliente; o volume de JS é grande, mas as interações são fluidas
• Cenários indicados: painéis SaaS, ferramentas de desenho online, editores de documentos e formulários complexos
• Exemplos típicos: Figma, Notion e Google Docs

Se você está criando uma aplicação Web que exige interações frequentes, essa abordagem faz sentido.

2. Next.js ou Nuxt — filosofia de plataforma full stack

Esses frameworks tentam combinar a interatividade de uma SPA com o desempenho e o SEO de SSR ou SSG. Eles não são apenas frameworks frontend: também permitem criar APIs no backend e buscam funcionar como plataformas de desenvolvimento full stack.

• Características: renderização no servidor mais hidratação no cliente; muitos recursos, mas maior volume de código
• Cenários indicados: e-commerce complexo, aplicações sociais e sites que precisam atualizar dados com frequência
• Exemplos típicos: Netflix, TikTok e Hulu

Se o projeto precisa de interações complexas com o usuário e lógica no servidor, Next.js é uma boa escolha.

3. Astro — filosofia focada em conteúdo

O princípio é “HTML estático por padrão, JS sob demanda”, otimizado especificamente para sites de conteúdo.

• Características: volume mínimo de JS, com redução de 83% a 90%; desempenho muito alto e bom SEO
• Cenários indicados: blogs, documentação, sites institucionais, páginas de marketing e páginas de produtos de e-commerce
• Exemplos típicos: blogs técnicos, sites corporativos e documentação online

Se você está criando um site de conteúdo, Astro tem uma vantagem clara.

Veja uma tabela comparativa:

Um ponto importante: Astro é independente de framework. Você pode escrever componentes com React, Vue ou Svelte e até combinar todos eles no mesmo projeto. Astro não tenta substituir React; ele oferece a opção de usar React apenas onde for necessário.

Para quais projetos Astro é ou não é indicado?

Depois de toda essa explicação, quando vale a pena usar Astro? A lista abaixo ajuda a decidir rapidamente.

✅ Cenários indicados para Astro:

1. Blogs pessoais e sites de documentação técnica

   • O conteúdo é principalmente texto e imagem
   • Há pouca interação, como comentários e busca
   • SEO é importante
   • Exemplo: a maioria dos blogs técnicos que você lê

2. Sites institucionais e landing pages de marketing

   • Apresentam produtos e serviços
   • Precisam carregar rapidamente, pois a velocidade inicial afeta a conversão
   • O conteúdo muda pouco
   • Exemplos: sites de produtos SaaS e páginas de campanhas

3. Páginas de produtos de e-commerce

   • Atenção: páginas de apresentação, não o carrinho e o fluxo de pagamento
   • Muitas imagens e descrições de produtos
   • Precisam de SEO para que os mecanismos de busca indexem os produtos
   • Exemplos: páginas de detalhes e de categorias de produtos

4. Portfólios e páginas pessoais

   • Apresentam projetos e habilidades
   • São simples e rápidas
   • Têm manutenção fácil
   • Exemplos: portfólios de designers e sites pessoais de desenvolvedores

❌ Cenários não indicados para Astro:

1. Aplicações Web altamente interativas

   • Ferramentas de colaboração online, como Figma e Miro
   • Dashboards complexos, com dados atualizados em tempo real
   • Painéis administrativos, com muitos formulários e operações
   • Nesses casos, a página inteira precisa de JS, e Astro apenas adicionaria uma camada desnecessária

2. Aplicações que exigem atualização de dados em tempo real

   • Chats
   • Plataformas de negociação de ações
   • Documentos colaborativos em tempo real
   • Astro gera principalmente páginas estáticas e não é especializado em dados em tempo real

3. Aplicações de página única (SPA)

   • Se o site é uma aplicação complexa e não precisa de SEO
   • Nesse caso, use React ou Vue diretamente; Astro não oferece uma vantagem clara

Um critério simples para decidir:

Faça duas perguntas:

1. Meu site serve principalmente para apresentar conteúdo ou oferecer interações complexas?
2. Se todo o JavaScript for desativado, ainda será possível usar e ler o site?

Se as respostas forem “apresentar conteúdo” e “sim”, há uma boa chance de Astro ser adequado. Se forem “interações complexas” e “não”, considere Next.js ou um framework SPA puro.

Astro é amigável para iniciantes? Qual é a curva de aprendizado?

Talvez você esteja pensando: “Mais um framework para aprender do zero?” A boa notícia é que a curva de aprendizado do Astro é bastante acessível.

Sintaxe muito familiar

Vultr - Servidor cloud NVMe de alto desempenho, 32 locais globais, deploy Docker com um clique

Ver preços →Anúncio

A sintaxe dos arquivos .astro é muito parecida com JSX e Vue. Se você já trabalhou com React ou Vue, consegue começar rapidamente. Há quem diga que a curva de aprendizado é surpreendentemente baixa.

Além disso, você não é obrigado a usar a sintaxe .astro. É possível escrever conteúdo diretamente em .md (Markdown), .jsx (React) e .vue (Vue). Escolha o formato que preferir ou combine vários deles no mesmo projeto.

Temas prontos para uso

Astro tem um catálogo de temas com modelos prontos de blog, documentação e portfólio. Escolha um modelo, ajuste o texto e as cores e o site pode entrar no ar em cerca de meia hora. Na prática, basta editar o Markdown para criar um site bem apresentado.

Boa experiência de desenvolvimento

Astro usa Vite e Esbuild, por isso a inicialização é muito rápida. A atualização durante o desenvolvimento também responde imediatamente, permitindo ver as mudanças assim que o código é salvo. Isso faz bastante diferença no dia a dia.

Documentação e comunidade maduras

A documentação oficial do Astro é clara e mostra o processo passo a passo. A comunidade também oferece diversos tutoriais e vídeos, então é fácil encontrar ajuda quando surge um problema.

Sinceramente, se você só quer criar um blog ou um site de documentação, Astro pode ser uma das opções mais rápidas. Não é preciso configurar ferramentas complexas de empacotamento nem perder tempo decidindo como implementar as rotas: os recursos essenciais já estão prontos.

Conclusão

Depois de tudo isso, vale recapitular os três princípios centrais do Astro:

1. Foco em conteúdo: criado para sites de conteúdo, fazendo a arquitetura servir ao que será publicado
2. Zero JS por padrão: não envia JavaScript por padrão e o carrega sob demanda apenas onde for realmente necessário
3. Arquitetura de ilhas: componentes interativos em um mar de HTML estático, com hidratação independente e sem bloqueio entre eles

A principal diferença em relação aos frameworks tradicionais é esta: Astro combina a experiência de desenvolvimento de um framework moderno com o desempenho de um site estático. Você aproveita componentes, atualização rápida e suporte a TypeScript, ao mesmo tempo que obtém uma velocidade de carregamento próxima à do HTML puro.

Se você está criando um blog, uma documentação, um site institucional ou uma landing page de marketing, vale experimentar Astro. Ele não serve para tudo, mas oferece uma vantagem clara nos cenários para os quais foi projetado.

Um último lembrete: Astro não significa “sem JS”. Significa “sem JS por padrão”. Os pontos que exigem interação continuam usando JavaScript; a diferença é que o framework não envia todo o runtime para a página inteira.

Para começar, consulte a documentação no site oficial do Astro. Aproveite também para explorar o catálogo de temas; talvez já exista um modelo adequado ao seu projeto. A melhor forma de entender é testar.