Astro: cero JavaScript y múltiples frameworks

Resumen

Astro es un framework para crear sitios web rápidos, optimizados y centrados en el contenido, con cero JavaScript en el navegador por defecto. Si buscas construir una landing page, un blog o un e-commerce ligero, esta herramienta te permite enviar a producción solo HTML, CSS y el mínimo JavaScript necesario.

Por qué Astro se ha vuelto tan popular entre desarrolladores

La adopción de Astro creció en los últimos años por tres razones que vale la pena entender antes de escribir tu primera línea de código.

La primera es que es altamente customizable. La segunda, que envía cero JavaScript al navegador a menos que tú lo pidas. Y la tercera, que está centrado en el contenido, lo que lo vuelve ideal para sitios donde la velocidad y el SEO importan más que la interactividad pesada.

¿Qué es Astro? Es un framework web agnóstico y centrado en el contenido que compila tu sitio a archivos estáticos (HTML, CSS y mínimo JavaScript), permitiéndote integrar React, Vue, Preact u otras librerías dentro del mismo proyecto.

Cómo funciona la naturaleza agnóstica de Astro en un proyecto real

Una de las características más potentes que vas a explorar es su naturaleza agnóstica: puedes usar la API propia de Astro o incorporar frameworks como React, Vue o Preact dentro del mismo sitio.

Cuándo conviene mezclar varios frameworks en una sola landing

Imagina una landing page dividida por secciones, conocidas como islas. Cada equipo puede trabajar en una isla distinta sin pisarse:

  • El header, que necesita interacción con el cliente, puede construirse en React.
  • Secciones estáticas pueden hacerse con la API nativa de Astro.
  • Otros bloques pueden integrarse con Vue.

Cada equipo mejora su parte sin complicar la compilación. Al final, Astro junta todo y entrega archivos estáticos listos para servirse. No es el caso más común, pero cuando aparece, te ahorra dolores de cabeza.

Por qué Astro es ideal para contenido, SEO y velocidad

Aquí viene lo interesante: Astro brilla cuando tu prioridad es el contenido. ¿Quieres una landing optimizada que cumpla con altos estándares de SEO y no procese JavaScript del lado del cliente? Astro compila el sitio y lo envía con los archivos mínimos necesarios.

Para blogs, puedes escribir el contenido en Markdown dentro de tu proyecto. Astro toma esos archivos, los trata como páginas o secciones y genera las rutas automáticamente. Tú te enfocas en escribir; el framework se encarga del resto.

¿Para qué sirve Astro? Sirve para construir landing pages, blogs y e-commerce optimizados en velocidad y SEO, donde el contenido pesa más que la interactividad y donde quieres enviar el mínimo JavaScript posible al navegador.

Cómo personalizar Astro con plugins e integraciones

La personalización es otra ventaja fuerte. Astro tiene un ecosistema de plugins, integraciones y recursos de terceros que potencian tu sitio.

Puedes integrar:

  • Frameworks y librerías como React, Vue o Preact.
  • Generadores de sitemap para SEO.
  • Conexiones con WordPress u otros gestores de contenido para traer información externa.

Esto te deja seguir centrado en el contenido mientras Astro orquesta lo demás.

Dónde puedo desplegar un sitio hecho con Astro

La versatilidad de despliegue es uno de sus mayores atractivos. Como la compilación produce mayormente HTML, CSS, imágenes y poco JavaScript, puedes enviarlo prácticamente a cualquier servicio.

Algunas opciones:

  • GitHub Pages, ideal para sitios 100% estáticos.
  • Netlify y Vercel, con funciones extra como APIs internas.
  • AWS o Google Cloud, si necesitas infraestructura más robusta.

Si tu proyecto requiere características avanzadas, como APIs internas, vas a necesitar una configuración específica. Por ejemplo, Vercel te da más capacidades que GitHub Pages, que solo sirve archivos estáticos.

¿Astro genera sitios estáticos o dinámicos? Por defecto genera sitios estáticos, pero puedes configurarlo para incluir rutas dinámicas, APIs internas y renderizado en servidor según el proveedor donde lo despliegues.

Qué vas a construir: un e-commerce con Astro, Google Sheets y WhatsApp

El proyecto del curso es un e-commerce completo. Vas a trabajar todos los elementos para que tu sitio tenga:

  • Productos sincronizados con Google Sheets, lo que facilita manejar el inventario sin un backend complejo.
  • Integración con la API de WhatsApp para que tus clientes te escriban directo y agilices la venta.
  • Despliegue final con opción de comprar un dominio y ofrecerlo como servicio real.

La idea es que termines con un producto que puedas usar para vender productos o servicios en internet desde el primer día.

Qué necesitas para empezar el curso de Astro

Los requisitos son mínimos y probablemente ya los tienes instalados:

  • Node instalado en tu computadora.
  • Git para control de versiones.
  • Un editor de código como Visual Studio Code.
  • Un navegador para revisar los cambios en vivo.

Con estas herramientas vas a recorrer cada particularidad de Astro hasta tener un producto final desplegado y funcional.

¿Qué tipo de e-commerce te gustaría construir o qué integración te interesaría sumar a tu sitio? Déjamelo en los comentarios antes de pasar a la configuración del proyecto.