Astro es un framework de aplicaciones web basado en JavaScript de código abierto. Fue creado por Fred K. Schott y varios colaboradores, quienes a día de hoy lo siguen manteniendo junto con la ayuda de cientos de usuarios que mejoran el código gracias a su naturaleza de código libre.
Descripción Astro, tal y como mencionan sus creadores en su documentación, es la elección idónea para construir sitios web orientados al contenido, como podría ser un foro o un blog.
Astro fue el creador de la nueva arquitectura de diseño web front-end denominada Astro Islands, la cual se encargaba de reducir la sobrecarga causada por frameworks de JavaScript más pesados.
Es gracias a esta nueva arquitectura que Astro es uno de los frameworks más ligeros y eficientes para usar, pero esto conlleva ciertas desventajas que afectan a la hora de crear aplicaciones web de un gran tamaño como podría ser una red social.
Historia Cuando Astro comenzó, su única propuesta, que en gran medida sigue siendo la misma hoy en día con solo algunos cambios, era la facilidad y velocidad de uso y ejecución. Se podía obtener contenido de cualquier lugar, incluyendo una API, un sistema de gestión de contenidos (CMS), un archivo MDX o un archivo Markdown, y mostrarlo en tu sitio con Astro.
Sin embargo, lo que llevó a Astro a triunfar fueron las Islas Astro.
Versiones VersiónFecha de liberaciónEnlace a su blog7.0Astro 7.06.0Astro 6.05.0Astro 5.04.0Astro 4.03.0Astro 3.02.0Astro 2.01.0Astro 1.0
Características
Astro Islands Una isla de Astro es un componente de interfaz de usuario interactivo incrustado dentro de una página HTML estática. Pueden existir varias islas en una página. Una isla siempre se representa de manera aislada al ser hidratada de forma independiente, es decir, a través de la hidratación parcial.
De este modo, una aplicación de Astro puede lograr un tiempo de carga inicial destacable sin estar lastrado por JavaScript. La mayor parte del sitio permanece estática y las partes interactivas o islas solo se hidratan según sea necesario después de la carga inicial de la página. Para simplificar muchísimo más esta explicación, sería como si ciertos componentes Astro se renderizasen con lazy loading.
Agnóstico a la interfaz de usuario/framework Puedes utilizar cualquier framework JavaScript que desees, incluso varios frameworks a la vez. El siguiente fragmento de código muestra un ejemplo de uso de un componente de React en Astro.--- import MyReactComponent from '../components/MyReactComponent.jsx';
<html> <body> <h1>¡Usa componentes de React directamente en Astro!</h1> <MyReactComponent /> </body> </html>
Server Side Rendering y Static Site Generation A pesar de que al principio Astro comenzó como un generador de sitios estáticos (SSG), lo que conlleva que el código sea cargado por los recursos del usuario, evolucionó satisfactoriamente y ahora permite el renderizado en el servidor (SSR) bien sea en la aplicación web al completo o páginas concretas. El SSR permite mejorar el rendimiento de un sitio web. Al delegar algunas de las tareas de renderizado al servidor, puedes reducir la carga de trabajo que el navegador del usuario necesita realizar, lo que se traduce en tiempos de carga inicial más rápidos y una experiencia de usuario más fluida.
Para activar el renderizado en el servidor, hay que configurar el fichero astro.config.mjs añadiendo la clave output tal que: import { defineConfig } from 'astro/config';
export default defineConfig({ output: 'server' });
Sin JavaScript por defecto A pesar de que como todo framework de JavaScript el programador puede añadir todo el código JavaScript que vea conveniente, de forma predeterminada el framework no creará casi nada de JavaScript para su uso. De esta forma evita la renderización costosa fuera de los dispositivos de los usuarios que naveguen por la aplicación web. Personalización con las integraciones de Astro Permiten al programador agregar nuevas funcionalidades a la aplicación web con muy pocas líneas de código. Gracias a estas integraciones puedes:
Usar Astro con otros frameworks y librerías como React, Vue, Svelte, Solid, TailwindCSS, etc. Generación automática de sitemaps.
Integraciones oficiales mantenidas por Astro EnlaceTipoIntegración@astrojs/alpinejsFrameworks UIAlpineJS@astrojs/reactFrameworks UIReact@astrojs/solid-jsFrameworks UISolidJS@astrojs/svelteFrameworks UISvelte@astrojs/vueFrameworks UIVue@astrojs/netlifyAdaptador SSRNetlify@astrojs/vercelAdaptador SSRVercel@astrojs/cloudflareAdaptador SSRCloudflare@astrojs/partytownOtras IntegracionesPartytown@astrojs/tailwindOtras IntegracionesTailwind
Ecosistema El equipo central de Astro también proporciona bibliotecas útiles creadas por ellos mismos.
Bibliotecas oficiales
astro-icon: Librería del componente Icon para Astro astro-seo: Librería del componente SEO para Astro astro-i18n: Librería de traducción internacional para Astro
Patrocinios Astro está patrocinado por empresas como Vercel, Storyblok, Google Chrome, Netlify y Sentry, entre otras.
Referencias
Enlaces externos utilizados
Documentación de Astro ¿Por qué Astro? Astro Web Framework Tutorial by freeCodeCamp (en inglés)
Categoría:Frameworks para JavaScript Categoría:Software de 2021 Categoría:Desarrollo web