Framework Astro
Descripción general
Astro es un framework web que envía cero JavaScript al cliente por defecto. Utiliza una arquitectura basada en componentes con soporte para múltiples frameworks frontend (React, Vue, Svelte, etc.) en el mismo proyecto.
Proceso
1. Configuración del proyecto
npm create astro@latest
# Elige una plantilla (blog, docs, portafolio, etc.)
# Instala las dependencias
2. Crear páginas
- Las páginas van en
src/pages/ - Enrutamiento basado en archivos
- Soporte para rutas dinámicas con
[param]
3. Componentes
- Crea componentes reutilizables en
src/components/ - Usa cualquier framework soportado (--- astro/react/vue/svelte ---)
- Comparte estado con Nano Stores
4. Datos y contenido
- Usa Colecciones de Contenido para Markdown/MDX con tipado seguro
- Obtén datos en tiempo de compilación con getStaticPaths
- Conéctate a bases de datos, APIs, CMS
5. Despliegue
- Despliega en Vercel, Netlify, Cloudflare Pages o cualquier adaptador
- Compila con
npm run build - SSR disponible cuando sea necesario con
output: 'server'
Ejemplos
- Blog: Colecciones de Contenido + Markdown + feed RSS
- Página de aterrizaje: Generación estática + hidratación parcial
- Documentación: Integración con el tema Starlight
- Comercio electrónico: SSR + base de datos + integración de pagos
Limitaciones
- No es ideal para aplicaciones altamente interactivas (usa Next.js en su lugar)
- La gestión de estado en el lado del cliente es limitada sin Nano Stores
- SSR añade complejidad: úsalo solo cuando sea necesario
- Algunas librerías de React no funcionan bien con la arquitectura de islas