wandres.dev
ONTOLOGÍA · El mapa de Astro

La ontología de Astro 7

El mapa mental de Astro antes de recorrerlo: la arquitectura de islas, el enfoque content-first, los modos de renderizado, el compilador en Rust, y el camino a producción.

⏱ 11 min

Astro nació de una idea contraria a la moda: la mayoría de los sitios web no necesitan enviar megabytes de JavaScript para mostrar contenido. Astro entrega HTML por defecto y añade interactividad solo donde de verdad hace falta —las “islas”—. Este mapa te da la visión aérea antes de empezar.

🎯 Al terminar esta lección sabrás
  • Ver el mapa mental completo de Astro.
  • Entender la arquitectura de islas y el enfoque content-first.
  • Situar los modos de renderizado y el ecosistema.
  • Empezar con el modelo mental correcto.

El territorio, de un vistazo

mindmap
root((Astro 7))
  Componentes
    .astro
    Props y slots
    Layouts
  Contenido
    Content collections
    Markdown y MDX
    Content Layer API
  Renderizado
    SSG estatico
    SSR servidor
    Server islands
  Interactividad
    Islands
    client directives
    Integraciones React Solid Vue
  Servidor
    Endpoints
    Middleware
    Actions
    Adapters
  Plataforma
    Compilador en Rust
    Vite 8 y Rolldown
    Deploy al edge

Las ideas clave

🏝️

Islands architecture

La página es HTML estático; cada componente interactivo es una “isla” que se hidrata por separado, solo cuando hace falta. Menos JS, más velocidad.

📝

Content-first

Astro está diseñado para sitios con mucho contenido: content collections tipadas, Markdown/MDX, y una Content Layer API para traer datos de cualquier fuente.

🔀

Renderizado flexible

Estático (SSG), en servidor (SSR), o híbrido por página; y server islands para trozos dinámicos sin renderizar toda la página.

🧩

Agnóstico de framework

Usa React, Solid, Vue o Svelte como islas en la misma página. Astro no te ata a un framework de UI.

Por qué importa en 2026

Astro apuesta por enviar menos, no más

La tendencia de la última década fue mover todo al cliente: SPAs que descargan la app entera y renderizan en el navegador. Astro invierte esa apuesta con una observación simple: un blog, una tienda, una landing, una documentación —la mayoría de la web— son fundamentalmente contenido, no aplicaciones. Para eso, enviar HTML y cero JS por defecto es más rápido, más accesible y mejor para SEO. La interactividad se añade quirúrgicamente, isla por isla. En 2026 Astro 7 lleva esto al extremo con un compilador reescrito en Rust y el bundler Rolldown (Vite 8): builds hasta un 60% más rápidos. El resultado es un framework que te deja usar todo el poder del JS moderno cuando lo necesitas, sin pagar su coste cuando no. Interiorizar “envía lo mínimo” es el cambio de mentalidad que hace clic con Astro.

El camino

  • Niveles 1–10 · Fundamentos — por qué Astro, setup, el componente .astro, templating, props/slots, estilos, layouts, routing.
  • Niveles 11–16 · Contenido — content collections, la Content Layer API, Markdown/MDX, code highlighting.
  • Niveles 17–25 · Interactividad y servidor — islands, integraciones, server islands, SSR/SSG, adapters, endpoints, middleware, actions.
  • Niveles 26–34 · Producción — view transitions, imágenes, fuentes, env, i18n, seguridad, SEO, integraciones propias.
  • Niveles 35–41 · Maestría — el compilador en Rust, Vite/Rolldown, rendimiento, testing, deploy, arquitectura y el nivel PhD.
⚔️ Sitúate en el mapa
  1. Estudia el mapa mental y localiza qué te suena y qué no.
  2. Piensa en un sitio que uses: ¿cuánto de él es contenido y cuánto es “app”? Esa proporción es el argumento de Astro.
  3. Si vienes de React/Next: el reto será “des-aprender” a mandar JS por defecto.
  4. Comprométete con la mentalidad: por defecto, cero JS; añade islas solo donde la interacción lo exija.