Astro (framework)

Añadir enlaces
De Wikipedia, la enciclopedia libre
Programa
Parte de Generador de sitios estáticos
Información general
Tipo de programa Framework JavaScript
Autor Fred Schott
Desarrollador Astro y la comunidad
Modelo de desarrollo Código abierto
Lanzamiento inicial 2021 (Beta), 2022 (Release)
Licencia Licencia MIT
Información técnica
Programado en
Enlaces
[editar datos en Wikidata]

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[editar]

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.[1]​

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.[2]​

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.[cita requerida]

Historia[editar]

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.[cita requerida]

Sin embargo, lo que llevó a Astro a triunfar fueron las Islas Astro.[3]​

Versiones[editar]

Versión Fecha de liberación Enlace a su blog
4.0 30 de diciembre de 2023 Astro 4.0
3.0 4 de agosto de 2023 Astro 3.0
2.0 24 de enero de 2023 Astro 2.0
1.0 9 de agosto de 2022 Astro 1.0

Características[editar]

Astro Islands[editar]

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.[2]​

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[editar]

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.[4]​

---
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[editar]

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.[5]​

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[editar]

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[editar]

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 [6]​[editar]

Enlace Tipo Integración
@astrojs/alpinejs Frameworks UI AlpineJS
@astrojs/react Frameworks UI React
@astrojs/solid-js Frameworks UI SolidJS
@astrojs/svelte Frameworks UI Svelte
@astrojs/vue Frameworks UI Vue
@astrojs/netlify Adaptador SSR Netlify
@astrojs/vercel Adaptador SSR Vercel
@astrojs/cloudflare Adaptador SSR Cloudflare
@astrojs/partytown Otras Integraciones Partytown
@astrojs/tailwind Otras Integraciones Tailwind

Ecosistema[editar]

El equipo central de Astro también proporciona bibliotecas útiles creadas por ellos mismos.

Bibliotecas oficiales[editar]

  • astro-icon: Librería del componente Icon para Astro [7]​
  • astro-seo: Librería del componente SEO para Astro [8]​
  • astro-i18n: Librería de traducción internacional para Astro [9]​

Patrocinios[editar]

Astro está patrocinado por empresas como Vercel, Storyblok, Google Chrome, Netlify y Sentry, entre otras.[10]​

Referencias[editar]

  1. ↑ «¿Por qué Astro?». Docs. Consultado el 25 de febrero de 2024. 
  2. ↑ a b «Astro Islands». Docs. Consultado el 24 de febrero de 2024. 
  3. ↑ Emmanuel, Ohans (17 de noviembre de 2023). «Astro adoption guide: Overview, examples, and alternatives». LogRocket Blog. Consultado el 24 de febrero de 2024. 
  4. ↑ «Componentes de otros frameworks». Docs. Consultado el 24 de febrero de 2024. 
  5. ↑ «Modos de renderizado». Docs. Consultado el 24 de febrero de 2024. 
  6. ↑ «Agrega integraciones». Docs. Consultado el 24 de febrero de 2024. 
  7. ↑ Moore, Nate (24 de febrero de 2024), natemoo-re/astro-icon, consultado el 24 de febrero de 2024 .
  8. ↑ Schumacher, Jonas (24 de febrero de 2024), jonasmerlin/astro-seo, consultado el 24 de febrero de 2024 .
  9. ↑ Fernandez, Alexandre (22 de febrero de 2024), Alexandre-Fernandez/astro-i18n, consultado el 24 de febrero de 2024 .
  10. ↑ «Astro». Astro (en inglés). Consultado el 24 de febrero de 2024. 

Enlaces externos utilizados[editar]

Obtenido de «https://es.wikipedia.org/w/index.php?title=Astro_(framework)&oldid=158720558»