Experimentando con Astro

Publicado el 16/4/2025, 21:00:00 por Eliecer Sánchez

Últimamente he estado experimentando con Astro, un framework moderno para la construcción de sitios web rápidos, eficientes y con un rendimiento excelente. Astro se basa en una idea poderosa: solo enviar al navegador lo que es estrictamente necesario. Esto permite crear sitios súper rápidos y optimizados sin sacrificar la experiencia de desarrollo. Uno de sus mayores atractivos es la capacidad de integrar múltiples tecnologías como React, Vue, Svelte, Solid, entre otras, en un mismo proyecto sin fricciones.

Una de las cosas que más me ha sorprendido es su arquitectura basada en “islas de interactividad”. Esta estrategia permite que el contenido estático se cargue primero (ideal para SEO y velocidad), y luego, de manera selectiva, se hidratan las partes interactivas. La experiencia general ha sido muy positiva: la curva de aprendizaje es suave, el ecosistema está bien documentado, y el rendimiento de los sitios que he creado con Astro es sobresaliente. Además, la simplicidad para desplegar en plataformas como Vercel o Netlify lo hace aún más atractivo.

Guía rápida para instalar Astro

Requisitos previos

Asegúrate de tener instalado:

Node.js (versión 18 o superior recomendada)
npm o pnpm o yarn

Verifica con:

node -v
npm -v

Crear un nuevo proyecto Astro

Con npm:

npm create astro@latest

Con pnpm:

pnpm create astro@latest

Con yarn:

yarn create astro

Sigue el asistente interactivo para:

Nombrar tu proyecto
Elegir una plantilla (recomendada: blog o minimal)
Elegir herramientas (TypeScript, Git, etc.)

Entra a tu proyecto

cd nombre-del-proyecto

Instala dependencias

npm install

O con pnpm:

pnpm install

Inicia el servidor de desarrollo

npm run dev

Accede a tu sitio en: http://localhost:4321

Compilar para producción (opcional)

npm run build

¡Listo! Ya tienes un proyecto Astro funcionando.

Para que veas lo sencillo que es empezar, aquí te dejo un pequeño ejemplo de un componente básico tipo “Hola Mundo” escrito en Astro:

---
// Este es un componente .astro
const nombre = "Astro";
---
<html>
  <head>
    <title>Hola desde Astro</title>
  </head>
  <body>
    <h1>¡Hola, {nombre}!</h1>
  </body>
</html>

Recursos recomendados

Si quieres aprender más sobre Astro, aquí te dejo algunos enlaces muy útiles:

En resumen, si estás buscando una forma moderna, eficiente y divertida de construir sitios web, Astro definitivamente merece tu atención.

Etiquetas

#astro