wandres.dev
El framework web content-first

Domina Astro 7
hasta nivel dios

De islands architecture a producción: componentes, content collections, SSR/SSG, actions, view transitions, el compilador en Rust y desplegar en el edge.

La ruta

42 niveles, de novato a dios

Cada nivel construye sobre el anterior. Sin saltos, sin huecos.

Ontología Nivel 0 · El mapa de Astro

La visión aérea de Astro 7: islands, content, SSR/SSG, el compilador en Rust, y el mapa del camino.

Mapa mentalIslands

Por qué Astro Nivel 1 · islands y content-first

La filosofía: HTML por defecto, cero JS salvo donde hace falta (islands), y el enfoque content-first.

IslandsZero-JSFilosofía

Setup y proyecto Nivel 2 · Astro 7, Vite 8, Rolldown

Crear un proyecto, la estructura, y el stack de 2026: compilador en Rust, Vite 8 con Rolldown.

setupVite 8Rolldown

El componente .astro Nivel 3 · frontmatter y template

La anatomía de un componente Astro: el script del frontmatter y el template HTML.

.astrofrontmatter

Templating Nivel 4 · expresiones y directivas

Expresiones JSX-like, map, condicionales, Fragment, y las directivas de template.

expresionesdirectivas

Props y slots Nivel 5 · componer componentes

Pasar datos con props (tipados), slots nombrados, y el patrón de composición.

propsslots

Estilos Nivel 6 · scoped, global, CSS

Estilos con scope automático, globales, variables CSS, y la integración con Tailwind/CSS.

scopedCSSTailwind

Layouts Nivel 7 · plantillas compartidas

Layouts como componentes envolventes, slots, y el patrón head/body.

layoutsslots

Routing por archivos Nivel 8 · src/pages

El enrutado basado en archivos, index, y la estructura de páginas.

routingpages

Rutas dinámicas Nivel 9 · params y getStaticPaths

Rutas dinámicas ([slug], [...rest]), getStaticPaths, y params.

[slug]getStaticPaths

Routing avanzado Nivel 10 · redirects, paginación, rewrites

Redirecciones en config y Astro.redirect, paginación con paginate(), la prop page, rewrites y prioridad de rutas.

redirectspaginaterewrite

Content Collections Nivel 11 · glob loader y schema

Colecciones de contenido con el content layer: content.config.ts, glob loader, Zod schema, getCollection y render.

collectionsglobschema

Content Layer API Nivel 12 · loaders personalizados

La Content Layer API: loaders integrados y propios, el store, parseData, y caching incremental.

loadersstoreAPI

Markdown a fondo Nivel 13 · remark, rehype, headings

Markdown como página, render() y getHeadings, plugins remark y rehype, y la config global de markdown.

Markdownremarkrehype

MDX a fondo Nivel 14 · componentes y expresiones

Qué añade MDX, usar componentes dentro del contenido, expresiones y exportaciones, layouts, y el prop components.

MDXcomponentes

Resaltado de código Nivel 15 · Shiki y transformers

Resaltado nativo con Shiki, temas dual claro/oscuro, el componente Code, transformers, y cliente vs servidor.

Shikicódigo

RSS, sitemap y datos Nivel 16 · feeds y datos derivados

Feed RSS con @astrojs/rss, sitemap, endpoints de datos, import.meta.glob, y robots/canonical/Open Graph.

RSSsitemapdatos

Arquitectura de islas Nivel 17 · client:load, visible, only

La arquitectura de islas: client:load/idle/visible/media/only, compartir estado y el coste de la hidratación.

islandsclient:hydration

Integraciones de framework Nivel 18 · React, Solid, Vue, Svelte

astro add y los renderers, pasar props y slots, anidar frameworks distintos, y estado compartido con nanostores.

ReactSolidislands

Server Islands Nivel 19 · server:defer y fallback

Server islands: server:defer, el contenido fallback, cómo funcionan por dentro, casos de uso y límites.

server islandsserver:defer

SSR, SSG e híbrido Nivel 20 · output y prerender

Los modos de render de Astro 7, prerender por página, el objeto Astro en SSR, y estrategias de render.

SSRSSGprerender

Adapters Nivel 21 · Node, Cloudflare, Vercel

Qué es un adapter, @astrojs/node, adapters de edge y serverless, configurarlos y elegir plataforma.

adaptersdeployedge

Endpoints y API Nivel 22 · rutas de servidor

Endpoints estáticos y SSR, verbos y APIContext, params dinámicos, streaming y CORS, y patrones reales.

endpointsAPIJSON

Middleware Nivel 23 · onRequest y locals

El middleware: onRequest, context.locals tipado, modificar la respuesta, sequence, y casos reales.

middlewarelocals

Actions Nivel 24 · funciones de servidor tipadas

Astro Actions: defineAction, input con Zod, llamarlas (data/error), formularios progresivos y errores tipados.

actionstype-safeZod

Sesiones y estado Nivel 25 · Astro.session y cookies

La Sessions API, drivers de almacenamiento, cookies con Astro.cookies, auth con sesión y seguridad.

sessionscookiesauth

View Transitions Nivel 26 · ClientRouter y transiciones

El ClientRouter, transition:name/animate, transition:persist, los eventos del ciclo y accesibilidad.

transitionsrouterSPA

Imágenes Nivel 27 · astro:assets

El componente Image, Picture y formatos, imágenes remotas y en colecciones, getImage, y rendimiento/CLS.

assetsImageCLS

Fuentes (Fonts API) Nivel 28 · fuentes optimizadas

La Fonts API: familias y proveedores, el componente Font y el preload, rendimiento tipográfico y autoalojar.

fontsCLSpreload

Variables de entorno Nivel 29 · astro:env

import.meta.env, el schema tipado de astro:env, leer client/server y getSecret, secretos y buenas prácticas.

envsecretstype-safe

i18n Nivel 30 · internacionalización

El routing i18n integrado, los helpers de URL por locale, contenido traducido y fallback, y SEO multiidioma.

i18nlocaleshreflang

Seguridad Nivel 31 · CSP, XSS, cabeceras

XSS y set:html, Content Security Policy, cabeceras de seguridad, CSRF y checkOrigin, y buenas prácticas.

CSPXSSseguridad

SEO Nivel 32 · metadatos, OG, JSON-LD

Metadatos base y canonical, Open Graph y og:image dinámica, datos estructurados JSON-LD, indexación y Web Vitals.

SEOOpen GraphJSON-LD

Prefetch y navegación Nivel 33 · estrategias de prefetch

La feature prefetch y sus estrategias, prefetchAll, la API programática, presupuesto LCP/INP y medición.

prefetchLCPINP

Escribir integraciones Nivel 34 · Integration API

La Integration API: AstroIntegration, el hook astro:config:setup, otros hooks del ciclo, módulos virtuales y publicar.

integrationshooksplugins

El compilador en Rust Nivel 35 · el pipeline de Astro 7

Por qué un compilador propio, el pipeline parse/transform, islas e hidratación en el output, WASM vs binario nativo.

compiladorRustbuild

Vite 8 y Rolldown Nivel 36 · el motor por debajo

El rol de Vite, Rolldown el bundler en Rust, configurar Vite desde astro.config, el grafo de módulos y diagnóstico.

Vite 8Rolldownbundler

Rendimiento Nivel 37 · Core Web Vitals

El presupuesto de JS, Core Web Vitals a fondo, analizar el bundle, optimizar assets/CSS/caché y el SSR.

performanceWeb Vitals

Testing Nivel 38 · Vitest, Container, Playwright

Estrategia de testing, Vitest en Astro, la Container API, testear endpoints y actions, y e2e con Playwright.

VitestContainerPlaywright

Deploy Nivel 39 · a producción

Anatomía del build, deploy estático y SSR/edge, CI/CD con GitHub Actions, y operar en producción.

deployCI/CDedge

Arquitectura a escala Nivel 40 · proyectos grandes

Estructura de un proyecto serio, monorepos con pnpm/Turborepo, contenido a escala, composición y mantenibilidad.

arquitecturamonorepoescala

Nivel Dios: síntesis Nivel 41 · arquitectura y trade-offs

El modelo mental completo, diseñar el render por página, rendimiento extremo, un caso de estudio integral y el futuro.

síntesisarquitecturaPhD
206lecciones
42niveles
0→∞de cero a dios

¿Listo para dominar Astro 7?

Empieza por los fundamentos y sube nivel a nivel hasta el dominio total.

Comenzar el camino →