Astro é um framework web de código aberto feito para sites cujo centro é o conteúdo: páginas de empresa, landing pages, blogs, documentação e portfólios. Ele monta as páginas como HTML pronto e só envia JavaScript para o navegador nas partes que realmente precisam reagir ao visitante.

Essa escolha muda o resultado prático. Uma página de oferta feita em Astro chega ao celular como texto, imagens e estilos, sem carregar um aplicativo inteiro antes de mostrar o título. Quando existe um botão interativo, um carrossel ou um formulário com validação, só aquele pedaço recebe código no navegador.

A seguir você vê como o Astro funciona por dentro, para que tipo de site ele serve, quando outra ferramenta encaixa melhor e o que mudou no projeto em 2026.

O que é Astro, em poucas linhas

A documentação oficial define o Astro como o framework para construir sites orientados a conteúdo, como blogs, marketing e e-commerce. Três ideias sustentam essa definição:

  • Servidor primeiro. O Astro gera o HTML no build ou no servidor, não no navegador do visitante.
  • Zero JavaScript por padrão. Componentes viram HTML e CSS. O JavaScript de cliente só aparece quando você pede.
  • Independente de biblioteca de interface. Você pode usar componentes React, Preact, Svelte, Vue, Solid e outros no mesmo projeto.

O projeto é distribuído sob a licença MIT. Você pode usar, modificar e publicar sites feitos com ele sem pagar licença.

Como o Astro funciona

HTML primeiro

Um arquivo .astro tem duas partes: um bloco de código no topo, que roda no build ou no servidor, e o modelo da página logo abaixo. O resultado é HTML comum.

---
import Depoimentos from "../components/Depoimentos.jsx";
const titulo = "Bolos por encomenda em Belo Horizonte";
---


<h1>{titulo}</h1>
<p>Este parágrafo chega pronto no HTML da página.</p>
<Depoimentos client:visible />

O título e o parágrafo saem como HTML estático. O componente Depoimentos, escrito em React nesse exemplo, só carrega JavaScript quando entra na área visível da tela.

Para quem busca, isso tem uma consequência concreta: o conteúdo está no documento que o servidor devolve. Robôs de busca e ferramentas de prévia de link leem o texto sem depender de execução de JavaScript. Isso não garante posição no Google, mas tira um obstáculo comum de sites montados inteiramente no navegador.

Ilhas de interatividade

A arquitetura de ilhas é a parte mais conhecida do Astro. A página sobre ilhas descreve a ideia assim: renderizar a maior parte da página como HTML estático e rápido, com pequenas “ilhas” de JavaScript onde a interatividade é necessária.

Uma ilha nasce de uma diretiva client:* no componente:

Diretiva Quando o JavaScript carrega
client:load logo que a página carrega
client:idle quando o navegador fica ocioso
client:visible quando o componente entra na tela
client:media quando uma media query é atendida, como tela pequena
client:only só no navegador, sem HTML gerado antes no servidor

Cada ilha é independente. Um menu móvel, um simulador de preço e um mapa podem conviver na mesma página sem que o resto dela vire um aplicativo.

Existe também a ilha de servidor, com server:defer. Ela tira do caminho principal um trecho lento, como um bloco personalizado por visitante, e deixa o restante da página aparecer antes com um conteúdo provisório.

Componentes de vários frameworks

Como o Astro não impõe uma biblioteca de interface, um time que já tem componentes em React ou Vue pode reaproveitá-los. Na prática, muitos sites em Astro usam só componentes .astro e um pouco de TypeScript puro para menus e formulários, porque o conteúdo não pede mais do que isso.

Content collections

Sites de conteúdo têm muitos arquivos parecidos: posts, cases, serviços, perguntas frequentes. As content collections organizam esse material em coleções com um esquema definido. O Astro confere os campos de cada item no build e avisa quando falta um título ou quando uma data está em formato errado.

Para um blog em Markdown ou MDX, isso evita que um post saia sem descrição ou com a imagem de capa quebrada sem ninguém perceber.

Estático ou sob demanda: os adapters

Por padrão, o Astro gera um site estático: o comando astro build produz uma pasta dist/ com HTML, CSS, imagens e o JavaScript das ilhas. Qualquer servidor de arquivos consegue entregar essa pasta.

Quando uma página precisa ser montada a cada visita, como uma área com dados do usuário ou um formulário que grava num banco, entra a renderização sob demanda. Para isso, o projeto usa um adapter da plataforma onde vai rodar. Há adapters oficiais para Cloudflare, Netlify, Vercel e Node.

O mesmo projeto pode misturar os dois modos: a maioria das páginas pré-renderizada no build e algumas poucas renderizadas no servidor.

Como é um projeto Astro por dentro

A estrutura costuma ser curta:

astro.config.mjs     configuração, integrações e adapter
package.json         dependências e scripts (dev, build)
public/              arquivos copiados como estão: favicon, robots.txt
src/pages/           cada arquivo vira uma rota: index.astro em /
src/components/      partes reutilizáveis da interface
src/content/         coleções de conteúdo, quando o site tem

O roteamento segue os arquivos de src/pages. Um src/pages/contato.astro vira /contato. Essa previsibilidade ajuda quem edita o site, inclusive um agente de IA: o lugar de cada página é óbvio pela árvore de pastas.

Para que tipo de site o Astro serve

Tipo de site Encaixe com Astro Por quê
Landing page de oferta ou campanha Muito bom HTML leve, poucas ilhas, abre rápido em link de anúncio
Site institucional ou de negócio local Muito bom Páginas fixas, conteúdo editável, pouco JavaScript
Blog e documentação Muito bom Content collections, Markdown e MDX
Portfólio e currículo Muito bom Imagens otimizadas no build, páginas estáticas
Loja com catálogo Bom Vitrine estática com carrinho ou checkout como ilha ou serviço
Painel com login e muita interação Depende Pode funcionar, mas há ferramentas pensadas para isso

O ponto comum das linhas de cima é que o visitante vem para ler, comparar e agir. A interatividade existe, mas é pontual.

Quando considerar outra ferramenta

O Astro não é a resposta para tudo, e a própria documentação contrasta o projeto com frameworks voltados a experiências de aplicação no navegador.

Pense em outra opção quando:

  • a maior parte da tela muda a cada clique, como num editor, num painel de métricas ou numa ferramenta interna;
  • o produto depende de estado compartilhado entre muitas telas, com login em quase todas as rotas;
  • o time já tem uma aplicação grande em outro framework e o site é só uma parte dela.

Nesses casos, frameworks de aplicação como Next.js ou TanStack Start tendem a dar menos atrito. A comparação para landing pages está em Astro vs Next.js para landing page.

Também vale lembrar o outro extremo. Se a página é um único HTML simples, sem conteúdo repetido nem componentes, um arquivo estático escrito à mão resolve sem build.

Astro em 2026: Cloudflare e a versão 7

Em 16 de janeiro de 2026, a Cloudflare anunciou a aquisição da The Astro Technology Company, a empresa que mantinha o framework. Os anúncios do blog da Cloudflare e do blog do Astro dizem a mesma coisa sobre os dois pontos que mais preocupam quem usa o projeto:

  • o Astro continua de código aberto, sob licença MIT, com roadmap público;
  • o framework segue com suporte a vários destinos de deploy, não só à Cloudflare.

Ainda em 2026 saiu o Astro 7. O compilador de arquivos .astro foi reescrito em Rust e o projeto passou a usar o Vite 8. Para quem cria sites, a mudança aparece como builds mais rápidos. Para quem migra um projeto antigo, vale ler o guia de atualização: o compilador novo é mais rígido com HTML malformado, como tags que ficaram abertas.

Onde o Site no Ar entra

No Site no Ar, o tipo de site Landing Page é um projeto Astro. As páginas ficam em src/pages, arquivos avulsos em public/ e cada publicação passa pelo build do projeto. Por padrão as páginas são pré-renderizadas; uma página pode ser marcada para renderizar sob demanda quando precisa ler segredos ou um banco de dados. Os detalhes estão em Tipos de site e arquivos.

O Site no Ar não cria o site. Quem escreve o projeto é a sua IA, como Claude, ChatGPT, Codex ou Cursor, conectada pelo MCP. O Site no Ar roda o build, publica, guarda as versões, cuida do endereço e do HTTPS, e o link volta na conversa.

Se você quer partir de algo pronto, os templates Astro já estão publicados com conteúdo de exemplo e podem ser adaptados pela IA. Para o passo a passo, veja como criar um site Astro com IA. E se a dúvida é onde colocar no ar um projeto que você já tem, o guia sobre como hospedar um site Astro compara as opções.

Perguntas comuns sobre Astro

Astro é gratuito?

O framework é gratuito e de código aberto, sob licença MIT. O custo aparece na hospedagem, que depende da plataforma escolhida.

Preciso saber JavaScript para usar Astro?

Para escrever o projeto à mão, ajuda conhecer HTML, CSS e um pouco de JavaScript ou TypeScript. Quando uma IA edita o projeto, você pode pedir as mudanças em português, mas ainda vale revisar o resultado antes de publicar.

Site em Astro é sempre estático?

Não. O padrão é estático, e o projeto pode ter páginas renderizadas no servidor com um adapter. Muitos sites usam os dois modos ao mesmo tempo.

Astro serve para SEO?

O Astro entrega o conteúdo no HTML, o que facilita a leitura por buscadores. Título, descrição, links internos e conteúdo útil continuam sendo trabalho de quem cria o site.