¿Qué es Astro y cómo empezar?

¡Hola!

La tecnología evoluciona todos los días, siempre hay algo nuevo y esta vez es Astro! 🤯

Esta tecnología esta siendo muy bien aceptada en la comunidad, ya tiene más de ⭐ 3k estrellas en GitHub.

¿Pero qué es?

Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”

Puedes leer con más detalles en la introducción a Astro.

Básicamente lo que hace Astro es enviar menos JavaScript en el momento de la compilación convirtiendo todo en HTML estático.

Lo más interesante es que puedes usar cualquier framework o librería (React, Vue, Svelte, etc), para desarrollar tu aplicación.
Hasta usar varios frameworks en un mismo proyecto.

Por ejemplo:

Todo.jsx
Todo.vue
Todo.svelte

Esto me parece muy interesante, aunque dudo que sea bueno mezclar. 🤔

Iniciar un proyecto con Astro

⚠️ Importante

La versión mínima de Node.js que se requiere es la 14.15.1.

# Inicializamos Astro 
npm init astro
# Instalamos las dependencias
npm install
# Ejecutamos el servidor local
npm start

Uso

Estructura básica recomendada:

├── src/
│   ├── components/
│   └── pages/
│       └── index.astro
├── public/
└── package.json

Dentro de Components agregaríamos nuestros archivos, por ejemplo un componente React y luego los importamos en un archivo .astro.

Así es como se ve un archivo `.astro`

---
import Nav from '../components/Nav.astro';
import TodoReact from '../components/Todo.jsx';
import TodoSvelte from '../components/Todo.svelte';
---

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Astro</title>
 </head>
 <body>
   <header>
     <!-- Colocamo nuestro componente Astro -->
     <Nav />
   </header>
   <div class="contentTodo">
     <!-- Colocamo nuestro componente React -->
     <TodoReact:visible />
     <!-- Colocamo nuestro componente Svelte -->
     <TodoSvelte:visible />
   </div>
 </body>
</html>

Prácticamente es HTML, solo que al principio del archivo colocamos el JavaScript dentro de un bloque de guiones (---).

Routing

El enrutamiento ocurre dentro de src/pages/* los archivos .astro se convierten en .html estático.

Por ejemplo tienes lo siguiente:

index.astro
about.astro
404.astro

Los archivos de esta carpeta se corresponde con una URL pública.

Ejemplo:

Archivo local	URL publica
`src/pages/index.astro`	`/index.html`

¡Astro tiene muchas características más!

Más info

Puedes leer más sobre Astro en el Readme del proyecto.
Mira la documentación.
También en esta demo que hizo Cassidy con Astro + React + Vue.
Aca dejo mi primera experiencia con Astro + React + Svelte + Vue, también puedes verlo en vivo.
Echa un vistazo a este artículo en CSS-Tricks.

Conclusión

Hay muchos temas más para cubrir, pero espero que este breve artículo pueda servir como para entender un poco Astro y como empezar.
Esta tecnología es muy nueva, es probable que haya algunos errores, pero el equipo de astro está trabajando duro todos los días.

¡Saludos!