CodeAventura
Astro
▸Bienvenido a Astro▸¿Qué es Astro y por qué existe?

Misión

●iniciando…
Astro
Preparando entorno

Esto solo ocurre la primera vez que abres el curso.

01 / 22¿Qué es Astro y por qué existe?

¿Qué es Astro y por qué existe?

La web se llenó de JavaScript

Hace una década, una página web era texto, imágenes y un poco de interactividad. Hoy, hasta el blog más simple suele cargar megabytes de JavaScript: routers en el cliente, frameworks que rehidratan la página entera, librerías que la mayoría de usuarios nunca van a tocar.

El precio: webs lentas, sobre todo en móviles, y en redes con cobertura mediocre.

La idea de Astro

Astro nació en 2021 con una propuesta simple y radical: enviar cero JavaScript por defecto. La mayor parte de tu sitio es contenido estático — ¿por qué hidratar un blog entero como si fuera una SPA?

Astro renderiza tus páginas a HTML en build time. Solo si tú marcas un componente como interactivo, Astro le manda al navegador el JS necesario para esa isla concreta. Es lo opuesto a la mentalidad SPA: en lugar de "todo es JS y vamos quitando", aquí "todo es HTML y vamos añadiendo".

MPA vs SPA vs Astro

JS al navegador
HTML estático + JS solo de las islas
Hidratación
Solo las islas marcadas con client:*
Pros
  • Cero JS por defecto
  • Multi-framework: React, Vue, Svelte... a la vez
  • El usuario solo paga por lo que es interactivo
Contras
  • Estado global entre islas requiere store externo
  • No es la mejor opción si toda la web es interactiva (gmail, figma)

Lo que vas a poder hacer

  • Construir blogs y sitios de marketing ultra rápidos sin renunciar al DX moderno.
  • Mezclar componentes de React, Vue, Svelte, Solid, Preact... en el mismo proyecto.
  • Generar sitios estáticos (SSG), renderizar en servidor (SSR) o ambos.
  • Definir tu contenido en Markdown/MDX con esquemas tipados de Content Collections.
  • Optimizar imágenes, fuentes y scripts sin pelearte con la configuración.

La sintaxis es familiar

Un archivo .astro se parece a un componente: tiene una zona arriba, entre ---, donde escribes JavaScript/TypeScript que se ejecuta en build, y debajo el HTML que se va a renderizar.

Si has tocado React, JSX o Svelte, te resultará natural.

Astro no es un framework de UI

Es un meta-framework de sitios. No tiene su propio sistema de componentes interactivos: te trae integraciones para usar el que ya conozcas. La pieza propia de Astro es el archivo .astro, que es perfecto para layouts, páginas y cualquier componente no interactivo.

Esto lo hace flexible: empiezas con HTML puro y vas metiendo islas según haga falta.

Tu desafío 🚀

A la derecha tienes un proyecto Astro mínimo abierto en src/pages/index.astro. La estructura es estándar:

  • --- arriba: frontmatter (vacío por ahora)
  • HTML debajo: lo que verá el visitante
  1. Cambia el texto del <h1> por un saludo personalizado con tu nombre
  2. Cambia el texto del <p> para que cuente algo sobre ti

Estás escribiendo HTML real. Astro lo va a servir tal cual al navegador, sin runtime de JavaScript. Cada KB que ahorras aquí se nota en el tiempo de carga de tus visitantes.