Framework Astro
Visão Geral
Astro é um framework web que, por padrão, envia zero JavaScript para o cliente. Ele utiliza uma arquitetura baseada em componentes com suporte a vários frameworks frontend (React, Vue, Svelte, etc.) no mesmo projeto.
Processo
1. Configuração do Projeto
npm create astro@latest
# Escolha um modelo (blog, docs, portfólio, etc.)
# Instale as dependências
2. Criação de Páginas
- As páginas vão em
src/pages/ - Roteamento baseado em arquivos
- Suporte a rotas dinâmicas com a sintaxe
[param]
3. Componentes
- Crie componentes reutilizáveis em
src/components/ - Use qualquer framework suportado (--- astro/react/vue/svelte ---)
- Compartilhe estado com Nano Stores
4. Dados e Conteúdo
- Use Content Collections para Markdown/MDX com tipagem segura
- Busque dados em tempo de build com getStaticPaths
- Conecte-se a bancos de dados, APIs, CMS
5. Implantação
- Implante no Vercel, Netlify, Cloudflare Pages ou qualquer adaptador
- Compile com
npm run build - SSR disponível quando necessário com
output: 'server'
Exemplos
- Blog: Content Collections + Markdown + feed RSS
- Landing Page: Geração estática + hidratação parcial
- Documentação: Integração com tema Starlight
- E-commerce: SSR + banco de dados + integração de pagamento
Limitações
- Não é ideal para aplicativos altamente interativos (use Next.js)
- Gerenciamento de estado no cliente limitado sem Nano Stores
- SSR adiciona complexidade — use apenas quando necessário
- Algumas bibliotecas React não funcionam bem com a arquitetura de ilhas