Astro

Astro es un framework de JavaScript optimizado para desarrollar aplicaciones web rápidas y orientadas a contenido.

Introducción a Astro

¿Por qué Astro? Astro es un framework para construir sitios web ultra rápidos y optimizados para el máximo rendimiento. Además, ofrece una experiencia única al combinar lo mejor de las herramientas de desarrollo modernas con características avanzadas como la renderización estática y la entrega eficiente de contenido.

Es ideal para sitios que priorizan la velocidad y la experiencia del usuario final, como blogs, sitios de documentación, o tiendas online con contenido estático. Destaca por la fácil optimización para SEO, sólo envía el mínimo JavaScript al cliente y soporta varios frameworks.

Principales razones para elegir Astro

Astro ofrece una combinación única de características que lo hacen destacar frente a otros frameworks. Estas son las más importantes:

Orientado al contenido: Astro está diseñado específicamente para proyectos donde el contenido (como artículos, documentación, o blogs) es el protagonista.
Sin JavaScript innecesario: Por defecto, Astro elimina el JavaScript del cliente a menos que sea absolutamente necesario, garantizando un rendimiento óptimo.
Compatible con múltiples frameworks: Integra componentes de React, Vue, Svelte y más en un solo proyecto.
Desarrollo moderno, sencillo y rápido: Ofrece un entorno de desarrollo intuitivo con un excelente soporte para TypeScript y un sistema de archivos sencillo basado en convenciones.
Servidor primero: Las páginas se generan en el servidor, optimizando el rendimiento inicial.
Rápido por defecto: Utiliza técnicas avanzadas como renderizado estático y división de JavaScript para ofrecer una velocidad inigualable.

Crear una Aplicación Astro

Crear una aplicación en Astro es un proceso sencillo y rápido gracias a su CLI (Command Line Interface). En pocos pasos puedes tener un proyecto funcional configurado para empezar a desarrollar.

Instalar Astro

Si no lo tienes instalado, puedes ejecutar el siguiente comando que iniciará el asistente interactivo que te guiará en la configuración de tu proyecto.

npm create astro@latest

Una vez creado el proyecto y después de instalar las dependencias puedes ejecutar el servidor local

npm run dev

Esto iniciará un servidor de desarrollo accesible en http://localhost:4321.

Estructura de directorios

La aplicación tiene una estructura clara y basada en convenciones.

├── public/             # Archivos estáticos que no cambian (imágenes, fuentes, etc.)
├── src/
│   ├── assets/         # Archivos o imágenes
│   ├── components/     # Componentes reutilizables (React, Vue, Svelte, etc.) o otros componentes Astro
│   ├── layouts/        # Diseños compartidos para múltiples páginas
│   └── pages/          # Páginas principales del sitio (cada archivo representa una ruta)
├── astro.config.mjs    # Configuración del proyecto Astro
├── package.json        # Dependencias y scripts del proyecto
└── tsconfig.json       # Configuración de TypeScript (opcional)

Descripción de las carpetas clave:

public/ Contiene activos estáticos como imágenes, fuentes o archivos que no necesitan procesamiento. Todo lo que esté en esta carpeta será accesible desde la raíz del dominio /.
src/pages/ Es el corazón del proyecto. Cada archivo aquí representa una ruta. Por ejemplo: src/pages/index.astro se convierte en /. src/pages/about.astro se convierte en /about.
src/components/ Almacena componentes reutilizables, ya sean de Astro o de frameworks como React, Vue o Svelte.
src/layouts/ Se utiliza para diseños que se comparten entre varias páginas, como encabezados y pies de página consistentes.
astro.config.mjs Archivo de configuración principal donde puedes definir rutas, integraciones y ajustes específicos del proyecto.

Ejemplo de una Página Astro

Una página Astro es esencialmente un archivo .astro que combina HTML, JavaScript y componentes para construir contenido dinámico y estático.

---
const title = "Bienvenido a Astro";
const description = "Un framework para sitios web rápidos y modernos.";
---

<html>
  <head>
    <title>{title}</title>
    <meta name="description" content={description} />
  </head>
  <body>
    <header>
      <h1>{title}</h1>
      <p>{description}</p>
    </header>

    <main>
      <section>
        Hola Mundo!
      </section>
    </main>

    <footer>
      <p>&copy; 2024 Mi Proyecto con Astro</p>
    </footer>
  </body>
</html>

Explicación del ejemplo:

Bloque de frontmatter (---): Este bloque inicial permite definir variables locales, importar módulos y añadir funcionalidad JavaScript. En este caso, sólo se definen variables como title y description.
Plantilla HTML combinada con JavaScript: La página utiliza sintaxis JSX/templating para insertar dinámicamente valores como {title} y {description}.
Contenido estructurado: Puedes mezclar contenido estático y dinámico fácilmente, adaptando la página a tus necesidades.

Astro Islands

¿Qué son las Astro Islands?

Las Astro islands es una funcionalidad estrella del framework. Se refiere a una arquitectura donde las partes interactivas de una página web (como componentes de React, Vue o Svelte entre otras) son tratadas como “islas” en un océano de contenido estático. Estas islas se cargan de forma independiente, permitiendo que el contenido estático sea renderizado y entregado rápidamente, mientras que las partes interactivas solo se activan cuando es necesario.

Creando una Astro Island

Para crear una isla en Astro, basta con importar un componente de cualquier framework en un archivo .astro y usar una de las directivas client:* explícitamente para indicar cómo se cargará.

Ejemplo: Isla con un componente React

Para cada framework del que queramos importar componentes deberemos instalar la depedencia adecuada, por ejemplo para React:

npm install @astrojs/react

Si creamos un componente puramente en react llamado MyReactComponent.tsx (tsx indica que es un componente en TypeScript):

import { useState } from 'react';

export default function MyReactComponent() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Contador: {count}
    </button>
  );
}

Luego podemos importarlo desde una página .astro.

---
import MyComponent from './MyReactComponent'
---
<MyComponent client:load />

La directiva client:load sirve para indicar que el componente será interactivo y require cargar JavaScript desde el lado del cliente. Si no lo hiciéramos los eventos como click no funcionarían.

Conclusión

Astro está obteniendo mucha popularidad últimamente y hay que ver cómo evoluciona en el futuro, es muy completo y permite integraciones con multitud de otras frameworks.

Si deseas continuar aprendiendo puedes seguir en la documentación de la página oficial donde hay un tutorial de cómo implementar un Blog desde 0.