Las islas no son gratis: hidratar un componente cuesta JavaScript que descargar, parsear y ejecutar. Astro te da control fino para decidir cuándo ocurre eso.
¿La isla es crítica para el primer interacción del usuario?
client:load — ya, sin pensarEl JavaScript se descarga y se ejecuta cuanto antes (durante la carga inicial).
Cuándo: cuando la isla es crítica para la primera interacción. Ejemplos: un menú que el usuario necesita inmediatamente, un botón principal, un input de búsqueda visible al entrar.
client:idle — cuando el navegador esté tranquiloAstro espera a que el navegador termine sus tareas urgentes (requestIdleCallback) antes de hidratar.
Cuándo: islas secundarias, visibles pero no críticas. Un widget de newsletter, un toggle de modo oscuro, comparte-en-redes.
client:visible — cuando se veaAstro usa IntersectionObserver para esperar a que el componente entre en el viewport.
Cuándo: la isla está debajo del fold (lejos del scroll inicial). Ejemplos: un carrusel al final de la página, comentarios, un mapa, una galería pesada.
Es la directiva con mejor relación rendimiento/UX cuando el usuario tiene que hacer scroll para llegar al componente.
client:only="framework" — solo en clienteAstro no intenta renderizar el componente en server/build. El espacio queda vacío hasta que llega al navegador y se monta.
Cuándo: componentes que solo funcionan en el navegador: leen localStorage, dependen de APIs DOM al construirse, usan librerías que no soportan SSR (gráficos canvas, mapas con WebGL...).
⚠️ Hay coste: el usuario verá un espacio vacío durante un instante. Úsalo cuando no haya alternativa.
client:media — bajo media querySolo hidrata si la media query coincide. Útil para islas que solo necesitas en desktop o en móvil.
Solo una por componente. Si necesitas matices (por ejemplo, "visible" + condición extra), maneja la lógica dentro del componente.
client:idle o client:visible. Lo más barato.client:load para piezas realmente críticas.client:only es el último recurso (rompe SSR/SEO de esa parte).Tienes src/pages/index.astro con tres islas hipotéticas: <Menu />, <Newsletter />, <Carrusel />. Aplícales la directiva más sensata:
<Menu /> es el menú principal, crítico → client:load.<Newsletter /> es un widget secundario → client:idle.<Carrusel /> está al final de la página → client:visible.No hace falta importar nada real (los componentes son ficticios para esta lección): solo escribe el JSX con las directivas correctas.