Por que usar Astro para sites estáticos em 2026

Quando o objetivo é um site de conteúdo — institucional, blog, portfolio, landing page — a escolha do framework impacta diretamente no score de performance, custo de hospedagem e facilidade de manutenção. Astro se tornou a escolha padrão para esse tipo de projeto por uma razão simples: ele foi desenhado especificamente para isso.

O que é Astro e o que o diferencia

Astro é um framework de geração de sites estáticos (SSG) que compila para HTML puro em build time. A diferença fundamental em relação a React/Next.js, Vue ou Svelte é a filosofia padrão: zero JavaScript enviado ao cliente, a não ser que você explicitamente peça.

Enquanto um site Next.js padrão envia o runtime do React, o hydration code e o bundle da página inteira para qualquer rota — mesmo que ela seja 100% estática — o Astro envia apenas HTML e CSS. Resultado direto: Lighthouse 95–100 praticamente sem esforço em sites de conteúdo.

Islands Architecture: o melhor dos dois mundos

A ideia central do Astro é que a maioria das páginas web é principalmente conteúdo estático, com algumas "ilhas" interativas. Um site institucional pode ter 8 seções estáticas e um formulário de contato dinâmico — por que hidratar tudo?

Com a Islands Architecture do Astro, você define explicitamente quais componentes precisam de JavaScript no cliente e como eles devem ser hidratados:

---
// Componente Astro puro — zero JS no cliente
import HeaderStatico from '../components/HeaderStatico.astro';

// Componente React que precisa de interatividade
import FormularioContato from '../components/FormularioContato.tsx';
import MenuMobile from '../components/MenuMobile.tsx';
---

<!-- Renderizado como HTML puro no servidor -->
<HeaderStatico />

<!-- Hidratado imediatamente ao carregar a página -->
<MenuMobile client:load />

<!-- Hidratado somente quando entrar na viewport -->
<FormularioContato client:visible />

As diretivas de hidratação disponíveis:

• client:load — hidrata imediatamente (para componentes críticos como o header)
• client:idle — hidrata quando o browser fica ocioso (requestIdleCallback)
• client:visible — hidrata quando o componente entra na viewport (IntersectionObserver)
• client:media="(max-width: 768px)" — hidrata quando uma media query é satisfeita
• client:only="react"` — renderiza apenas no cliente, sem SSR

Isso significa que um site com 30 componentes React pode ter 28 deles hidratados com client:visible — o JavaScript só é carregado e executado quando o usuário chega perto daquele componente. Os outros 2 nunca precisam de JS.

Comparativo de performance: Astro vs alternativas

Para sites de conteúdo com tráfego médio, a diferença é consistente em benchmarks públicos:

• Astro vs WordPress: sites Astro são 40–60% menores em tamanho de transferência e carregam 3–5× mais rápido. WordPress com plugins de cache e CDN chega próximo, mas a complexidade operacional é muito maior.
• Astro vs Next.js (pages router): Next.js envia o runtime do React (~45KB) mesmo para páginas estáticas. Para um blog simples, Astro envia HTML puro. A diferença no LCP pode ser 0,5–1s em conexões lentas.
• Astro vs Gatsby: Gatsby tem hidratação total por padrão (como Next.js). Também foi descontinuado para desenvolvimento ativo — o futuro da Netlify em SSG é incerto.

Content Collections: gestão de conteúdo nativa

Astro tem um sistema nativo de coleções de conteúdo que oferece validação de schema com Zod, TypeScript completo no frontmatter e hot reload durante o desenvolvimento. Para blogs e sites com muito conteúdo Markdown/MDX:

// src/content/config.ts
import { defineCollection, z } from 'astro:content';

const blog = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string().max(160),
    publishedAt: z.string(),
    tags: z.array(z.string()),
    published: z.boolean().default(true),
  }),
});

export const collections = { blog };

// Uso em uma página
import { getCollection } from 'astro:content';

// TypeScript sabe exatamente o shape de cada post
const posts = await getCollection('blog', ({ data }) => data.published);
const sorted = posts.sort((a, b) =>
  new Date(b.data.publishedAt).getTime() - new Date(a.data.publishedAt).getTime()
);

Integrações de primeira classe

Astro tem integrações oficiais para as ferramentas mais usadas no ecossistema:

• @astrojs/react, @astrojs/vue, @astrojs/svelte — use qualquer framework de componentes
• @astrojs/tailwind — Tailwind CSS integrado
• @astrojs/sitemap — sitemap gerado automaticamente no build
• @astrojs/rss — RSS feed tipado com as Content Collections
• @astrojs/image — otimização de imagens com conversão para WebP/AVIF
• @astrojs/cloudflare, @astrojs/vercel, @astrojs/netlify — adapters para deploy com SSR

Sintaxe de componentes: .astro files

O formato de componente do Astro é familiar para quem já trabalhou com qualquer framework moderno — um bloco de frontmatter em JavaScript/TypeScript, um template HTML com expressões, e estilos com escopo automático:

---
// Frontmatter: executa no servidor em build time
interface Props {
  title: string;
  description: string;
}

const { title, description } = Astro.props;
const canonicalUrl = new URL(Astro.url.pathname, 'https://www.seusite.com.br');
---

<!-- Template: HTML com expressões JavaScript -->
<section class="hero">
  <h1>{title}</h1>
  <p>{description}</p>
  <a href={canonicalUrl.href}>Ver mais</a>
</section>

<style>
  /* Scoped automaticamente para este componente */
  .hero {
    padding: 4rem 2rem;
    text-align: center;
  }
</style>

Quando Astro é a escolha certa

Astro se destaca quando o projeto se encaixa em:

• Sites de conteúdo: blogs, portais de notícias, documentação, sites institucionais
• Landing pages: onde performance máxima e SEO são prioritários
• Sites com pouca interatividade: a maioria do conteúdo é estático com formulários isolados
• Projetos que precisam de múltiplos frameworks: Astro permite React, Vue e Svelte no mesmo projeto
• Times que valorizam simplicidade: sem provider hell, sem context API para dados simples, sem estado global desnecessário

Quando Next.js ou Remix são melhores

Astro não é a resposta certa para todos os casos. Prefira Next.js ou Remix quando:

• O produto é um aplicativo web com autenticação, dashboard e estado global complexo
• Você precisa de ISR (Incremental Static Regeneration) — revalidação de páginas estáticas em intervalos sem rebuild completo
• O time já tem expertise sólida em Next.js e o projeto tem prazo apertado
• O conteúdo é altamente dinâmico — preços em tempo real, feeds personalizados por usuário

Astro em produção: o que esperar

Alguns números de projetos Astro em produção:

• Build time: 500ms a 3s para sites com até 200 páginas estáticas (vs 30–120s em Gatsby ou Next.js)
• Lighthouse Performance: 95–100 para sites de conteúdo sem otimizações extras
• Bundle size: 0KB de JS para páginas estáticas (vs ~150–200KB para Next.js com React runtime)
• Custo de hospedagem: Cloudflare Pages e Vercel têm planos gratuitos generosos — um site Astro com 10k visitas/mês custa R$ 0

Para sites institucionais e landing pages, Astro é a escolha técnica mais defensável em 2026. Performance nativa, SEO configurável e complexidade operacional mínima — exatamente o que esse tipo de projeto precisa.