Formación corporativa en Astro

Este módulo cubre la creación de un proyecto Astro desde cero, la estructura de directorios, el servidor de desarrollo con hot reload, la configuración del archivo astro.config.mjs con integraciones y adaptadores, y la puesta a punto de TypeScript dentro de un proyecto Astro.

En este módulo se estudia la sintaxis de los componentes .astro, que combinan un bloque de script (frontmatter) con un template HTML. Se abordan las props, los slots, las expresiones de renderizado condicional y bucles, así como patrones para crear componentes reutilizables y escalables.

El sistema de páginas y enrutamiento es uno de los pilares de Astro y, probablemente, la pieza más directa para quien llega desde Next.js o SvelteKit. Astro adopta la convención de file-based routing y la lleva al extremo: cada fichero .astro, .md o .mdx bajo src/pages/ se convierte automáticamente en una ruta accesible, sin configuración adicional. El resultado es un modelo mental simple que encaja tanto en sitios estáticos (SSG) como en entornos híbridos con renderizado del servidor.

Qué cubre el módulo

El módulo recorre las rutas estáticas y dinámicas con parámetros ([slug].astro), las rutas rest con [...ruta].astro, la generación en getStaticPaths para sitios SSG, las páginas de error 404 y 500 personalizadas, las redirecciones configuradas en astro.config.mjs, los endpoints que sirven JSON o XML (por ejemplo sitemaps y feeds RSS), la integración con Markdown y MDX para páginas de contenido editorial y las reglas de priority y trailing slash que conviene conocer en despliegues en Vercel, Netlify o Cloudflare Pages.

Para qué sirve en la práctica

Este módulo habilita la construcción de la mayoría de estructuras habituales en un sitio corporativo: blog con slug, landing pages, páginas legales, catálogo de productos paginado, documentación técnica con índice autogenerado y redirecciones de rutas heredadas. En clientes B2B de contenidos, el enrutamiento de Astro reduce semanas de trabajo frente a alternativas no file-based.

Lecciones principales incluidas

Incluye tutoriales sobre páginas estáticas, rutas dinámicas, getStaticPaths, páginas de error y redirecciones, junto con ejercicios de código y un test de comprensión.

En este módulo se trabaja con layouts como plantillas base para las páginas, composición de layouts anidados, CSS scoped por componente, estilos globales e integración de Tailwind CSS como framework de utilidades.

Este módulo profundiza en el sistema de Content Collections de Astro y la Content Layer API: definición de colecciones con loaders, validación de esquemas con Zod, consultas tipadas, integración con MDX para contenido enriquecido y patrones prácticos para blogs y sitios de documentación.

En este módulo se configura el soporte multi-framework de Astro para integrar React, Vue y Svelte. Se estudian en detalle las directivas de hidratación parcial (client:load, client:idle, client:visible, client:media y client:only) y los patrones para combinar islas estáticas e interactivas en una misma página.

Este módulo aborda la obtención de datos en Astro: fetch en el frontmatter durante el build, creación de API routes y endpoints con funciones HTTP, activación del modo SSR para renderizado en servidor bajo demanda y configuración de adaptadores para Node.js, Vercel, Netlify y Cloudflare.

En este módulo se prepara la aplicación para producción: proceso de build, modos de salida (estático, SSR e híbrido), optimización de imagenes con el componente Image, View Transitions para navegación fluida y configuración de SEO con sitemap y RSS.