Patrones de diseño: Astro Islands

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.

Muy poderoso Astro!