Cuando usamos Astro, una de las ventajas es cómo delegamos el trabajo entre el servidor y el cliente. Podemos renderizar la mayoría del contenido en el servidor y enviar al navegador solo lo justo. Pero hay momentos en que necesitamos JavaScript del lado del cliente para mostrar componentes iteractivos —y ahí es donde entran los conocidos client:load y client:only.

Aunque ambos tienen un propósito similar —activar componentes en el navegador— tienen ligeras diferencias. Por eso vale la pena entender bien cómo funciona cada uno.

¿Qué hace client:load?

Cuando usamos client:load, Astro renderiza el componente en el servidor (SSR), genera el HTML estático y luego, cuando el navegador termina de cargar la página, activa el componente con JavaScript (o sea, lo “hidrata”).

Esto significa que el usuario ve el contenido casi de inmediato, pero la interactividad (eventos, estados, etc.) llega apenas termina la carga.

Ejemplo práctico:

---
// Componente que necesita interactividad después de que la página cargue
import Counter from '../components/Counter.jsx';
---

<Counter client:load />

Aquí, Counter se renderiza en el servidor, el usuario ve el número inicial sin esperar, y luego puede interactuar una vez que se hidrata.

Esto es útil si necesitamos que el contenido esté presente en el HTML que se envía al navegador (SEO, rendimiento percibido, accesibilidad…).

¿Y qué hace client:only?

Con client:only, el componente no se renderiza en el servidor. No hay HTML estático; el componente solo existe en el navegador.

Astro simplemente reserva el espacio y espera que el JavaScript se cargue y renderice el componente por completo en el cliente.

Ejemplo:

---
// Este componente solo tiene sentido en el cliente
import Map from '../components/Map.jsx';
---

<Map client:only="react" />

Aquí, Map no se renderiza del lado del servidor. No aparece en el HTML inicial. Se carga y se muestra cuando el navegador lo permite.

Esto tiene sentido cuando el componente depende de APIs del navegador (por ejemplo, geolocalización) o cuando no tiene sentido cargarlo en el servidor porque simplemente no funcionaría.

¿Cómo decidimos cuál usar?

Depende de si necesitamos el HTML inicial en el servidor o no.

• Si queremos SEO, renderizado rápido y accesibilidad desde el primer momento, usamos client:load.
• Si el componente no necesita estar presente en el HTML inicial o no puede renderizarse sin el navegador, usamos client:only.

Hay una tercera vía: otros modos de carga (client:idle, client:visible, etc.), pero en este artículo nos enfocamos en estos dos por su contraste claro y por ser los más usados.

Ejemplo comparativo

Supongamos que tenemos un componente de comentarios que se conecta a una API y permite interacción. ¿Qué conviene?

• Si queremos que los comentarios ya estén visibles cuando se carga la página (aunque no se puedan usar aún), iríamos con client:load.
• Si los comentarios requieren autenticación y solo tienen sentido si el usuario ya está identificado (con tokens en el navegador, por ejemplo), podríamos ir con client:only.

Un resumen rápido

Para terminar

Trabajar con Astro implica pensar en cómo dividimos el trabajo entre el servidor y el cliente. Ni client:load ni client:only son mejores por sí solos; simplemente cumplen roles diferentes. Elegir bien depende de lo que queremos lograr con cada componente.

Nos ayuda siempre preguntarnos: ¿Necesitamos el HTML en el servidor o no? A partir de ahí, la decisión suele ser bastante clara.