—Felipe Moacir

Astro 4.0: O Framework Sem JavaScript (Quando Você Não Precisa)

AstroPerformanceSSG
Astro 4.0: O Framework Sem JavaScript (Quando Você Não Precisa)

O Astro não é só mais um framework JavaScript. É uma filosofia: envie o mínimo de JavaScript possível para o cliente.

Por Que Zero JavaScript?

A maioria dos sites não precisa ser um SPA. Um blog, um site institucional, um portfólio - não há necessidade de carregar React/Vue completo só para exibir conteúdo estático.

Islands Architecture

O conceito de "ilhas" permite que você isole componentes interativos em um mar de HTML estático.

---
// page.astro
import InteractiveChart from './Chart.jsx';
---

<html>
  <h1>Meu Dashboard</h1>
  <p>Este parágrafo é HTML estático - zero JS</p>
  
  <!-- Esta "ilha" é hidratada no cliente -->
  <InteractiveChart client:visible />
</html>

O client:visible significa: só carregue o JavaScript quando o componente estiver visível no viewport.

Integrações Multi-Framework

Você pode usar React, Vue, Svelte e Solid no mesmo projeto. Cada ilha pode usar um framework diferente.

// astro.config.mjs
import { defineConfig } from 'astro/config';
import react from '@astrojs/react';
import vue from '@astrojs/vue';

export default defineConfig({
  integrations: [react(), vue()],
});

Content Collections: Type-Safe

Astro 4.0 tem suporte nativo para MDX com validação de schema via Zod.

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

const blog = defineCollection({
  schema: z.object({
    title: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

export const collections = { blog };

Agora seus posts de blog têm type safety completo.

Performance

Sites Astro geram HTML puro. O Lighthouse Score típico? 100/100 em todas as métricas.

  • Zero JS overhead por padrão
  • Partial Hydration apenas onde necessário
  • Build otimizado com Vite

Quando Usar Astro?

✅ Blogs, documentações, landing pages
✅ Sites de conteúdo com pouca interatividade
✅ E-commerce com ilhas de interação (carrinho, filtros)

❌ Dashboards complexos em tempo real
❌ Apps tipo Google Docs (estado global pesado)

Conclusão: Se você não precisa de um SPA completo, Astro oferece a melhor DX e performance do mercado.