¿Qué es Astro?

Astro vs MPAs vs SPAs

ℹ️ Definición
MPA (Multi-Page-Application) es una arquitectura web que consta de la entrega de múltiples páginas HTML procesadas desde el servidor.

.
Astro es un framework MPA, como Drupal o WordPress, donde la principal diferencia es el lenguaje con el que se desarrolla y procesa la información. Adicionalmente, en cuanto a la XD (Experience-Development) se parece al de muchos Frameworks de aplicaciones como Next de React o Nuxt de Vue.
.

ℹ️ Definición
SPA (Single-Page-Application) es una arquitectura web que consta en el procesamiento de las solicitudes desde el cliente.

.
En las MPA, la mayor parte del contenido es procesado desde servidor. En los SPA, la mayor parte del contenido se representa localmente mediante la ejecución de JavaScript en el navegador. Fuese el caso, en ambos se tiene un impacto en el comportamiento del sitio, rendimiento y SEO.
.
Representar nuestro contenido en el navegador puede parecer como la opción más rápida en lugar de solicitarlo desde un servidor remoto. Sin embargo, una SPA, en cuanto rendimiento, tendrá será más lento en la carga de FCP (First-Contentful-Paint) para con un MPA. Esto se debe a que un SPA necesita descargar, analizar y ejecutar una aplicación de JavaScript completa en el navegador solo para mostrar cualquier contenido. Como resultado, se traducirá en un mayor tiempo de espera antes de que su página termine de cargarse.
.
La mayoría de los Frameworks/librerías para SPA intentarán mitigar este problema de rendimiento agregando una representación virtual del servidor en la carga de la primera página. Para este caso, los Frameworks mutan para convertirse en Frameworks de Framework o Frameworks de arquitectura como Next, Nuxt, etc.
.
Los MPA procesan todo el HTML en un servidor remoto y, a menudo, no requieren mucho JavaScript (si es que lo necesitan) para ejecutarse. Esto brinda a las MPA una primera experiencia de carga mucho más rápida que las SPA, lo cual es esencial para los sitios web centrados en el contenido. Pero esto viene con una compensación: la navegación futura de la página no puede beneficiarse de la representación local, por lo que las experiencias de usuario de larga duración no se beneficiarán tanto después de la carga de la primera página.
.

Routing Application

✨ Concepto clave
Un router es un middleware que dirige las peticiones según su I/O definido, del cual permea bajo una lógica operativa.

.
En una MPA, cada solicitud al servidor decide con qué HTML responder, por lo que la lógica del router vive en el servidor. En una SPA, el router se ejecuta localmente en el navegador e “imita” cualquier navegación para mostrar la nueva página sin tocar un servidor.
.
De aquí, podemos mencionar que las MPAs ofrecen una primera experiencia de carga más rápida, mientras que las SPAs pueden ofrecer una segunda o tercera carga de página más rápida una vez que la aplicación JavaScript está completamente cargada en el navegador.
.
Los SPAs también pueden ofrecer transiciones más potentes en la navegación de la página porque controlan mucho la representación de la página mediante una virtualización, donde, para igualar esta característica, las MPAs aprovechan herramientas de 3ros para imitar esta características deslindando al desarrollador para concentrarse en la disposición del contenido.
.

State Application

Para este apartado, las SPAs son una arquitectura superior para las aplicaciones o plataformas web que se ocupan de la gestión del estado a lo largo de varias páginas o componentes. Esto se debe a que un SPA ejecuta todo el sitio web como una sola aplicación de JavaScript, lo que permite que la aplicación mantenga el estado, en la memoria, en varias páginas, para disponerla en estructuras de datos nativos del navegador o mediante globales por herramientas en esta categoría (Redux, Pinia, etc.).
.

Astro MPA y SPA

Astro prioriza el rendimiento y la simplicidad de las MPAs porque entiende el contexto y las necesidades de sitios estáticos enfocados en el contenido.
.
Por su parte, las aplicaciones o plataformas web más dinámicos y con mucha interacción pueden beneficiarse más de la arquitectura similar a una aplicación que brindan los SPA a expensas del rendimiento de la primera carga.
.

✨ Concepto clave
El término Isla, se refiere a un componente con interfaz que ofrece interacción a un contenido estático.

.
Por ello, Astro entiende y delega este concepto y permite adoptar, como arquitectura, las islas.
.
En Astro, podemos utilizar cualquier Framework/librería moderna Frontend para beneficiarnos de un contenido dinámico de interacción en Islas. La técnica sobre la que se construye este patrón arquitectónico se conoce como hidratación parcial o selectiva, donde Astro aprovecha los beneficios primarios de dichas herramientas, para alimentar sus islas automáticamente.

¿Qué es Astro?

Astro es un Framework considerado como all-in-one (todo-en-uno), lo que significa que pretende ser autosuficiente como herramienta, inclusión de ecosistemas y, sobre todo, ser amigable con el desarrollo mismo.
.
Entre sus principales características podemos encontrar:
.

• Construcción sobre API, el cual permite traducir conceptos complejos como HMR (Hot-Module-Replacement), para que sean eliminados en los dispositivos finales.
  .
• Inclusión de Componentes, que describe e invita al uso de una arquitectura web basada en elementos dinámicos que pueden ser administrados y aislados de un ciclo de renderización, como por ejemplo Vue o React.
  .
• Mínimo JS y Agnóstico, del cual busca no sobrecargar el tiempo de ejecución de JavaScript ya que, como SEO y Performance, buscamos minimizamos el FCP (First-Contentful-Paint).

.

¿Por qué Astro?

Astro es un Framework enfocado en el contenido, lo que significa que pretende disponer, en un menor tiempo, el contenido sin demorar su ejecución para su interacción.
.
Se elige Astro, por sobre otros Frameworks, cuando se desea desarrollar un producto web sin complejas interacciones típicas como aplicaciones o plataformas, por ejemplo: dashboard, notificaciones, chats, etc.
.
Esta es una de las diferencias más importantes que hay que entender sobre Astro. El enfoque único de Astro en el contenido le permite a Astro hacer concesiones y ofrecer características de rendimiento inigualables que no tendrían sentido para implementar en Frameworks más centrados en aplicaciones.

Astro: “Un nuevo tipo de creador de sitios estáticos que ofrece un rendimiento ultrarrápido con una experiencia de desarrollador moderna.”

Básicamente lo que hace Astro es enviar menos JavaScript en el momento de la compilación convirtiendo todo en HTML estático.

Lo más interesante es que puedes usar cualquier framework o librería (React, Vue, Svelte, etc), para desarrollar tu aplicación.
Hasta usar varios frameworks en un mismo proyecto.

Voy con miedo pero voy con toda !!!

bajando los indices de ignorancia

Astro se ve interesante. Un Framework enfocado en crear paginas Web y enfocadas en el contenido.

Vamos reservando sitio en este nuevo curso sobre desarrollo.
Enhorabuena.