El modelo de islas

Por qué Astro envía 0 KB de JS por defecto

Casi todas las webs tienen partes que nunca cambian una vez cargadas: el header, el footer, la navegación, el contenido del artículo. Y zonas que sí necesitan interacción: un buscador, un carrito, un formulario, un widget de likes.

La mayoría de frameworks tradicionales meten toda la página en un árbol React/Vue/Svelte y la hidratan entera, aunque el 90% sea estático. El usuario paga ese coste en cada visita.

Astro propone separar las dos cosas. Llama a la parte interactiva una isla: un trocito hidratado, rodeado de mar HTML estático.

Cómo se materializa una isla

Tú escribes componentes de tu framework favorito (React, Vue, Svelte, Solid, Preact). Cuando los usas en una página .astro, por defecto Astro los pinta como HTML y descarta su JS:

Para activarlo como isla y enviar el JS necesario, añade una directiva client:*:

Ahora sí: Astro empaqueta el código de Counter (y solo el suyo, no el resto del sitio) y lo carga en el navegador.

Las 4 directivas client:*

• client:load → hidrata cuanto antes (al cargar la página).
• client:idle → espera a que el navegador esté tranquilo.
• client:visible → espera a que el componente entre en pantalla.
• client:only="framework" → no renderiza en server, solo en cliente.

(En la próxima lección las usamos a fondo.)

¿Qué cuenta como isla?

Cualquier componente de framework con una directiva client:*:

• Un widget de búsqueda con autocompletado (React).
• Un slider de imágenes (Vue).
• Un toggle de modo oscuro (Svelte).
• Un visualizador de datos (Solid).

Lo no marcado (componentes .astro, HTML, otros componentes de framework sin directiva) no envía JS.

¿Y mezclar frameworks?

Sí. Una página puede tener una isla React y una isla Vue al mismo tiempo. Astro te lo permite con sus integraciones (@astrojs/react, @astrojs/vue, etc.). Cada isla solo carga el runtime de su framework.

Es raro hacerlo en producción (suele ser más sano elegir uno), pero es útil al migrar gradualmente desde otra stack.

Tu desafío 🚀

Imagínate que existe un componente Counter (no hace falta crearlo, lo damos por importado). En src/pages/index.astro:

1. Renderiza <Counter /> en el body.
2. Marca el componente con la directiva client:load para activarlo como isla.

Aunque el preview no pueda ejecutarlo realmente (depende de la integración), lo importante aquí es que entiendas la sintaxis: ese atributo client:load es lo que promueve un componente normal a isla interactiva.