Astro + React: islas de interactividad sin sacrificar velocidad

Astro promete cero JavaScript por defecto y lo cumple. Pero cuando necesitas interactividad real —un buscador, un menú móvil accesible o un toggle de tema— puedes hidratar solo los componentes que lo necesitan. Ahí entran las islas.

¿Qué es una isla?

Una isla es un componente interactivo dentro de una página mayormente estática. Astro envía HTML para todo lo demás y solo carga JavaScript para la isla. El resultado: páginas rápidas con interactividad focalizada.

Cuándo hidratar

• Buscador: necesita React + Fuse.js para filtrar en el cliente.
• Menú móvil: puede resolverse con JS ligero inline, pero el focus trap es más limpio con una isla.
• Toggle de tema: un script inline basta para evitar el flash de tema incorrecto.

El balance correcto

La clave es no hidratar de más. Cada isla añade JavaScript, así que conviene medir el impacto. En este sitio, el buscador es prácticamente la única isla React; el resto son scripts pequeños o animaciones CSS.

Las islas bien usadas te dan el poder de una app sin el peso de una app.