Experimentando com Astro

Publicado em 16/04/2025, 21:00:00 por Eliecer Sánchez

Ultimamente tenho experimentado o Astro, um framework moderno para a construção de sites rápidos, eficientes e com excelente desempenho. O Astro se baseia em uma ideia poderosa: enviar ao navegador apenas o que é estritamente necessário. Isso permite criar sites super rápidos e otimizados sem sacrificar a experiência de desenvolvimento. Um dos seus maiores atrativos é a capacidade de integrar múltiplas tecnologias como React, Vue, Svelte, Solid, entre outras, em um mesmo projeto sem complicações.

Uma das coisas que mais me surpreendeu foi a arquitetura baseada em “ilhas de interatividade”. Essa estratégia permite que o conteúdo estático seja carregado primeiro (ideal para SEO e velocidade), e depois, de forma seletiva, as partes interativas são hidratadas. A experiência geral tem sido muito positiva: a curva de aprendizado é suave, o ecossistema é bem documentado e o desempenho dos sites que criei com Astro é excelente. Além disso, a simplicidade para fazer o deploy em plataformas como Vercel ou Netlify o torna ainda mais atraente.

Guia Rápido para Instalar o Astro

Pré-requisitos

Certifique-se de que você tem instalado:

Node.js (versão 18 ou superior recomendada)
npm, pnpm ou yarn

Verifique com:

node -v
npm -v

Criar um Novo Projeto Astro

Usando npm:

npm create astro@latest

Usando pnpm:

pnpm create astro@latest

Usando yarn:

yarn create astro

Siga o assistente interativo para:

Nomear o seu projeto
Escolher um template (recomendado: blog ou minimal)
Escolher ferramentas (TypeScript, Git, etc.)

Acesse o Diretório do Projeto

cd nome-do-projeto

Instale as Dependências

npm install

Ou com pnpm:

pnpm install

Inicie o Servidor de Desenvolvimento

npm run dev

Acesse seu site em: http://localhost:4321

Gerar Build para Produção (Opcional)

npm run build

Pronto! Seu projeto Astro está funcionando.

Para mostrar como é fácil começar, aqui está um pequeno exemplo de um componente básico “Olá Mundo” escrito em Astro:

---
// Este é um componente .astro
const nome = "Astro";
---
<html>
  <head>
    <title>Olá do Astro</title>
  </head>
  <body>
    <h1>Olá, {nome}!</h1>
  </body>
</html>

Recursos recomendados

Se você quer aprender mais sobre Astro, aqui vão alguns links muito úteis:

Resumindo, se você está procurando uma forma moderna, eficiente e divertida de construir sites, o Astro definitivamente merece sua atenção.

Etiquetas

#astro