No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Patrones de diseño: Astro Islands

21/25
Recursos

Aportes 7

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Directivas del cliente

De forma predeterminada, un componente de framework no está hidratado en el cliente. Si no se proporciona la directiva client:*, tu HTML se representa en la página sin JavaScript.

Estos son los valores que puede tener la directiva client:

  • client:load: Cargue e hidrate el JavaScript del componente inmediatamente al cargar la página.
  • client:idle: Cargue e hidrate el componente JavaScript una vez que la página haya terminado con su carga inicial
  • client:visible: Cargue e hidrate el JavaScript del componente una vez que haya ingresado al viewport del usuario. Esto utiliza un IntersectionObserver internamente para realizar un seguimiento de la visibilidad.
  • client:media: client:media={string} carga e hidrata el componente JavaScript una vez que se cumple una determinada media query de CSS.
  • client:only: ¡Debes pasar el framework correcto al componente! Debido a que Astro no ejecuta el componente durante su compilación/en el servidor, Astro no sabe qué framework usa el componente a menos que se lo indiques explícitamente.
<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />

¿Qué es una Astro Island?

El término “Astro Island” se refiere a un componente de UI interactivo en una página HTML predominantemente estática. Pueden existir varias islas en una página, y una isla siempre se renderiza en forma aislada. Piensa en ellos como islas en un mar de HTML estático y no interactivo.
En Astro puedes utilizar cualquier framework de componentes de UI (React, Svelte, Vue, etc.) para renderizar islas interactivas en el navegador. Puedes “mix and match” (mezclar y combinar) diferentes frameworks en una misma página, o simplemente elegir tu favorito.

La técnica en la que se basa este patrón de arquitectura se conoce como hidratación parcial o selectiva. Astro aprovecha esta técnica para hidratar las islas automáticamente.

A mi al momento de querer generar el build me marco dos errores, los cuales solucione de la siguiente manera: En el archivo index.astro principal agregue `slug={``item``?.frontmatter?.slug}` dentro del componente de la Card, porque me decia que era necesario. Tambien en el layout dentro de array de los post, VSC agrego unknow al tipo de propiedad del item quedando de la siguiente manera. `            <time class="pr-2">{pubDate}</time>            {                tags.map((``item``: unknown)=> (                <span                class="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-xs text-purple-600 dark:bg-purple-600 dark:text-purple-100"              >                {``item``}                              ))              }        ` Los errores que tenia eran los siguientes: ![](https://static.platzi.com/media/user_upload/Error%20astro-c94602aa-25b5-4fe0-94a8-c6d85af3f636.jpg)

Comparto los recursos:

Islands Architecture

✨ Concepto clave
Los patrones de diseño son aquellos que facilitan la reutilización de estructuras de software.
Los patrones de arquitecturas son aquellos que expresan un esquema organizativo y estructural fundamental para sistemas de software.

.
Siendo un término relativamente nuevo, se posee poca información de origen del patrón de arquitectura Islands. Dicho patrón, inicialmente fue llamado como patrón Component Islands, acuñado por la arquitecta de interfaz de Etsy, Katie Sylor-Miller, durante una reunión de presentación de producto.
.
La idea general de una arquitectura de Islas es la representación de páginas estáticas de HTML en el servidor e inyectar marcadores de posición o ranuras alrededor de regiones altamente dinámicas. Estos marcadores de posición contienen la salida HTML procesada por el servidor desde su destino correspondiente. Dichos destinos se “hidratan” en cliente por workers autónomos, reutilizando su HTML generado por el servidor en local.
.
Esto puede parecer similar a los micro-frontends a primera vista, ya que ambos enfoques comparten la idea de dividir las aplicaciones en unidades independientes, con la diferencia que los micro-frontends no suelen ser en contenido HTML estático.
.
Una analogía más cercana al enfoque de “islas” sería la mejora progresiva, a la que esencialmente estamos agregando hidratación SSR o Server-Side-Rendering. En la mejora progresiva tradicional, podríamos tener un <script> que busca un carrusel de imágenes en la página e instancia un complemento en él. En cambio, ese carrusel de imágenes se representaría en el servidor y se emitiría un <script> dedicado que carga la implementación del carrusel de imágenes y lo actualiza en el lugar para que sea interactivo.
.

📌 Enlace importante
Esta idea final sería la naturaleza final del Framework Qwik.
Framework reimagined for the edge! - Qwik

.

Beneficios de las Islas

Como es bien sabido, en comparación de arquitecturas SPA o Single-Page-Application, la “Hidratación Selectiva” es gratis, significando en el rendimiento y la resolución en el navegador del contenido.
.
La representación de páginas con una arquitectura de islas da como resultado que las partes dinámicas más pesadas de la página se inicialicen no solo progresivamente, sino por separado. Resultando en que las regiones individuales de la página se vuelven interactivas sin que sea necesario cargar nada más o a volver a desplegar una página debido a su ciclo de montaje.
.
Muchas aplicaciones con arquitecturas SPA, son penalizadas por su rendimiento y optimización de SEO. Con las Islas, el SEO es recompensado por su procesamiento de peticiones y velocidad por carga en el navegador.
.

📌 Enlace importante
Islands Architecture - JASON Format

.

Tuve el siguiente error al usar `npm run build`. Para corregirlo, eliminé la carpeta **node\_modules** y cambié la versión de `@astrojs/mdx` a la `^0.19.6` en **package.json**. ![](https://static.platzi.com/media/user_upload/image-fc252638-0607-4eba-b8b1-b7f594fc4b1c.jpg)

Muy poderoso Astro!