Islas

• Relacionado con las integraciones (React, Vue, Svelte, etc.) para añadir dinamismo
• Las islas son un pequeño bloque o componentes de otras tecnologías
• El beneficio más obvio de crear con Astro Islands es el rendimiento
• La mayor parte del sitio web se convierte a HTML estático y rápido, y JavaScript solo se carga para los componentes individuales que lo necesitan (ej. un carrusel de imágenes.
• La técnica en la que se basa este patrón arquitectónico también se conoce como hidratación parcial o selectiva.
• De forma predeterminada, Astro renderizará automáticamente cada componente de la interfaz de usuario solo en HTML y CSS, eliminando automáticamente todo el JavaScript del lado del cliente.

Islas de cliente

• Una isla de cliente es un componente de interfaz de usuario de JavaScript interactivo que se hidrata por separado del resto de la página.
• Para convertir cualquier componente de interfaz de usuario estático en una isla interactiva, solo se necesita una directiva client:*.
• Y como la interacción se configura a nivel de componente, se puede manejar distintas prioridades de carga para cada componente en función de su uso.
• En Astro el desarrollado tiene la responsabilidad de indicarle explícitamente qué componentes de la página también deben ejecutarse en el navegador.

<!-- Estatico -->
<MySvelteComponent />

<!-- Componente que renderiza HTML -->
<MySvelteComponent client:load />

<!-- Componente interactivo -->
<MySvelteComponent client:only="svelte" />

Directivas

• Estas directivas controlan cómo se hidratan los componentes de UI Framework en la página.
• De forma predeterminada, un componente de UI Framework no se hidrata en el cliente.
• Si no se proporciona ninguna directiva client:*, el HTML se muestra en la página sin JavaScript.

Directiva	Prioridad	Descripción
client:load	Alta	Elementos que deben ser interactivos lo antes posible. Carga e hidrata el componente JS inmediatamente al cargar la página.
client:idle	Media	Le indica a un componente que se cargue cuando el navegador se vuelve inactivo. Carga e hidrata el componente JS una vez que la página haya terminado su carga inicial.
client:idle={{timeout: 500}}		El tiempo máximo de espera, en milisegundos, antes de hidratar el componente, incluso si la página aún no ha terminado su carga inicial.
client:visible	Baja	Carga cuando el componente se muestra en pantalla
client:visible={{rootMargin: "200px"}}		Carga cuando entra al margen establecido
client:media	Baja	Elementos que solo pueden ser visibles en ciertos tamaños de pantalla. client:media="(max-width: 50em)"
client:only="Ssvelte"		Para renderizar el componente de algún framework en el cliente. Similar a client:load ya que carga, representa e hidrata el componente inmediatamente después de cargar la página. Omite la representación del servidor (SSR) del HTML y la representa solo en el cliente. Se debe pasar el marco correcto del componente como valor.

En el caso de los componentes que se representan solo en el cliente, client:only, también es posible mostrar contenido de respaldo mientras se cargan.

<ClientComponent client:only="vue">
  <div slot="fallback">Loading</div>
</ClientComponent>

Islas de servidor

• Una isla de servidor es un componente Astro renderizado en un servidor normal al que se le indica que retrase la renderización hasta que su contenido esté disponible.
• La página se mostrará inmediatamente con cualquier contenido de respaldo especificado como marcador de posición. Luego, el contenido propio del componente se obtiene en el cliente y se muestra cuando está disponible.
• No depende de ninguna infraestructura de servidor, por lo que funcionará con cualquier host, desde un servidor Node.js en un contenedor Docker hasta el proveedor sin servidor cualquiera.

Componente

• Es un componente normal
• Estos componentes pueden hacer todo lo que normalmente se haría en una página renderizada a pedido, como obtener contenido y acceder a cookies:

src/components/Avatar.astro

---
import { getUserAvatar } from '../sessions';
const userSession = Astro.cookies.get('session');
const avatarURL = await getUserAvatar(userSession);
---

<img alt="User avatar" src={avatarURL} />

Uso

• Se debe agregar la directiva server:defer

src/pages/index.astro

---
import Avatar from '../components/Avatar.astro';
import GenericAvatar from '../components/GenericAvatar.astro';
---
<Avatar server:defer>
  <GenericAvatar slot="fallback" />
</Avatar>