Islands y directivas client:*

Aprende cuándo hidratar componentes y cómo usar client:load, client:idle, client:visible y client:only con criterio.

Este es uno de los puntos donde Astro se separa de muchos stacks: no asume que toda la página deba hidratarse.

Qué es una island

Una island es un componente interactivo dentro de una página mayoritariamente estática.

Ejemplos:

  • un buscador
  • un contador
  • un tab switcher
  • un filtro de productos

Todo lo demás puede seguir siendo HTML estático.

Directivas client:*

Las más habituales:

  • client:load
  • client:idle
  • client:visible
  • client:only

Cuándo usar cada una

client:load

Cuando algo debe estar listo enseguida.

client:idle

Cuando puede esperar un poco.

client:visible

Muy útil para widgets por debajo del primer scroll.

client:only

Cuando un componente solo tiene sentido en cliente.

Regla práctica

La pregunta correcta no es “¿puedo hidratarlo?”, sino “¿realmente necesito hidratarlo?”.

Cuanto menos JavaScript mandes, mejor.

Un error habitual

Llegar con mentalidad React total y convertir cada pieza de UI en componente hidratado aunque no tenga interactividad real.

Eso mata una parte importante de la ventaja de Astro.

Qué sí compensa hidratar

  • formularios ricos
  • modales complejos
  • filtros de listado
  • gráficos
  • experiencias claramente interactivas

En la última lección cerramos con contenido tipado, MDX y el flujo normal para publicar un proyecto Astro.