Directivas del cliente
De forma predeterminada, un componente de framework no está hidratado en el cliente. Si no se proporciona la directiva client:*
, tu HTML se representa en la página sin JavaScript.
Estos son los valores que puede tener la directiva client:
client:load
: Cargue e hidrate el JavaScript del componente inmediatamente al cargar la página.client:idle
: Cargue e hidrate el componente JavaScript una vez que la página haya terminado con su carga inicialclient:visible
: Cargue e hidrate el JavaScript del componente una vez que haya ingresado al viewport del usuario. Esto utiliza unIntersectionObserver
internamente para realizar un seguimiento de la visibilidad.client:media
:client:media={string}
carga e hidrata el componente JavaScript una vez que se cumple una determinada media query de CSS.client:only
: ¡Debes pasar el framework correcto al componente! Debido a que Astro no ejecuta el componente durante su compilación/en el servidor, Astro no sabe qué framework usa el componente a menos que se lo indiques explícitamente.
<SomeReactComponent client:only="react" />
<SomePreactComponent client:only="preact" />
<SomeSvelteComponent client:only="svelte" />
<SomeVueComponent client:only="vue" />
<SomeSolidComponent client:only="solid-js" />
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?