01. Introducción a Astro

1.1 Qué es Astro y por qué es revolucionario

👔 Parte teórica
💡 Ejemplos prácticos

¿Qué es Astro?

Astro es un framework web moderno diseñado para construir sitios web orientados al contenido que sean rápidos por defecto. Desarrollado con una filosofía de “menos JavaScript, más rendimiento”, Astro representa un cambio de paradigma en el desarrollo web contemporáneo.

🎯 Propósito

Crear sitios web extremadamente rápidos con mínimo JavaScript
Optimizar la entrega de contenido estático
Permitir interactividad selectiva donde sea necesaria
Mejorar métricas de rendimiento (Core Web Vitals)
Facilitar el desarrollo con herramientas modernas

⚙️ Cómo Funciona

Principio “Zero JS por Defecto”

Astro genera HTML estático puro durante el build
No envía JavaScript al navegador a menos que sea explícitamente necesario
Los componentes se renderizan en el servidor
Solo se hidrata JavaScript cuando se especifica

Proceso de Construcción

Build Time: Astro procesa componentes y genera HTML estático
Optimización: Minimiza CSS, optimiza imágenes, divide código
Hidratación Selectiva: Solo componentes marcados reciben JavaScript
Output: HTML, CSS y JavaScript mínimo optimizado

🌟 Características Revolucionarias

1. Arquitectura de Islas

Componentes interactivos aislados en un océano de HTML estático
Cada “isla” carga su JavaScript independientemente
Reduce drásticamente el JavaScript total

2. Multi-Framework

Soporta React, Vue, Svelte, Solid, Preact, Lit
Usa diferentes frameworks en el mismo proyecto
Reutiliza componentes existentes

3. Optimización Automática

Optimización de imágenes integrada
Code splitting automático
CSS scoping y minificación
Prefetching inteligente

4. Sintaxis Intuitiva

Similar a JSX pero más simple
Frontmatter para lógica del servidor
Componentes con extensión .astro

📊 Comparación con Otros Frameworks

Aspecto	Astro	Next.js	Gatsby	SvelteKit
JS por defecto	0 KB	~80 KB	~50 KB	~20 KB
Multi-framework	✅	❌	❌	❌
SSG nativo	✅	✅	✅	✅
Hidratación parcial	✅	❌	❌	❌

📄 Componente Astro Básico

---
const titulo = "Bienvenido a Astro";
const fecha = new Date().toLocaleDateString();
---

<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <title>{titulo}</title>
  </head>
  <body>
    <h1>{titulo}</h1>
    <p>Este HTML es estático, sin JavaScript</p>
    <p>Fecha: {fecha}</p>
  </body>
</html>

⚡ Comparación de Rendimiento

Página simple con Astro vs React:

Métrica	Astro	React (CRA)
Tamaño JS	0 KB	~130 KB
FCP	0.5s	1.8s
TTI	0.5s	3.2s
Lighthouse	100	85

1.2 Arquitectura de islas e hibridación con otros frameworks

👔 Parte teórica
💡 Ejemplos prácticos

Arquitectura de Islas

La Arquitectura de Islas permite crear páginas con “islas” de interactividad en un océano de HTML estático.

🎯 Concepto

Océano: HTML estático (la mayoría del contenido)
Islas: Componentes interactivos con JavaScript
Aislamiento: Cada isla es independiente
Rendimiento: Solo se carga JS donde se necesita

🔄 Directivas de Hidratación

Directiva	Cuándo se Hidrata	Uso Recomendado
client:load	Inmediatamente	Componentes críticos
client:idle	Cuando está inactivo	Componentes secundarios
client:visible	Cuando es visible	Below-the-fold
client:media	Media query coincide	Responsive
client:only	Solo cliente	APIs del navegador

🌐 Multi-Framework

Astro permite usar múltiples frameworks en la misma página:

React para componentes complejos
Vue para formularios reactivos
Svelte para widgets ligeros
Cada uno carga solo su JavaScript

🏝️ Ejemplo de Isla React

Componente React

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Contador: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

Uso en Astro

---
import Counter from '../components/Counter.jsx';
---

<html>
  <body>
    <h1>Mi Sitio</h1>
    <p>Contenido estático</p>

    <!-- Isla interactiva -->
    <Counter client:load />

    <p>Más contenido estático</p>
  </body>
</html>

🎨 Múltiples Frameworks

---
import ReactChart from '../components/ReactChart.jsx';
import VueForm from '../components/VueForm.vue';
import SvelteWidget from '../components/SvelteWidget.svelte';
---

<html>
  <body>
    <h1>Dashboard Híbrido</h1>

    <ReactChart client:visible />
    <VueForm client:idle />
    <SvelteWidget client:load />
  </body>
</html>

1.3 Instalación del entorno y creación del primer proyecto

👔 Parte teórica
💡 Ejemplos prácticos

Requisitos del Sistema

📋 Requisitos Previos

Node.js: Versión 18.14.1 o superior

Proporciona el entorno de ejecución
Incluye npm (gestor de paquetes)
Descarga desde nodejs.org

Editor de Código: Recomendado

VS Code con extensión Astro
WebStorm
Cualquier editor moderno

🔧 Proceso de Instalación

CLI Interactivo: Asistente paso a paso
Configuración: Selección de plantilla
Dependencias: Instalación automática
Git: Inicialización opcional

🚀 Instalación Paso a Paso

Verificar Node.js

node --version
# Debe mostrar v18.14.1 o superior

Crear proyecto
Terminal window
```
npm create astro@latest mi-proyecto
```

Seguir el asistente

✔ ¿Dónde crear tu proyecto? › mi-proyecto
✔ ¿Cómo comenzar? › Vacío
✔ ¿Instalar dependencias? › Sí
✔ ¿Inicializar git? › Sí
✔ ¿Usar TypeScript? › Sí

Navegar al proyecto
Terminal window
```
cd mi-proyecto
```
Iniciar servidor de desarrollo
Terminal window
```
npm run dev
```
Abrir en navegador
```
http://localhost:4321
```

📁 Estructura Generada

mi-proyecto/
├── src/
│   ├── pages/
│   │   └── index.astro
│   ├── components/
│   ├── layouts/
│   └── styles/
├── public/
│   └── favicon.svg
├── astro.config.mjs
├── package.json
└── tsconfig.json

🎯 Primera Página

src/pages/index.astro

---
const titulo = "Mi Primer Proyecto Astro";
---

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>{titulo}</title>
  </head>
  <body>
    <h1>🚀 {titulo}</h1>
    <p>¡Bienvenido a Astro!</p>
  </body>
</html>

📝 Comandos Útiles

# Desarrollo
npm run dev

# Build para producción
npm run build

# Previsualizar build
npm run preview

# Verificar tipos
npm run check

🐝