Esta es una nota. Tu padre te definió. Eso significa que usando los React Server components, un componente del servidor puede tener opciones que son componentes del servidor o del cliente. Y un componente del cliente solo puede tener componentes del cliente.
Podemos ver en el siguiente ejemplo. Tenemos en azul el componente del servidor. Tenemos naranja, los componentes del cliente. Y aquí tenemos un icono, tenemos un switch, tenemos entradas, y tenemos un lavado. Así que primero, cubriremos los componentes del servidor. Y después de eso, cubriremos los componentes del cliente. Los componentes del cliente, si vamos a la página, podemos ver aquí que tenemos un componente del servidor, que puedes usar, usa el servidor para definir eso. En cada componente del servidor, verás el uso del servidor. Estás expresando que es un componente del servidor. Esta es la forma en que lo pones y dices que es un componente del servidor. Aquí también es un componente del servidor e imagen. La imagen es un componente del servidor. También, aquí, el switch es un use client. Para el componente del servidor, usamos use server. Para el cliente componente, usamos use client. Si volvemos a la página, la entrada también es un cliente, use client. Y el componente del servidor es use server. Así que esto también es un use server.
Entonces, en ese caso, ¿cuál es la diferencia entre el componente del servidor y el componente del cliente? No es solo que estás usando este use server, use client. En use servers, puedes interactuar con la otra API, otro servidor, otros microservices, database. Y para nuestros clientes, tenemos un user state. Tenemos un user first quizás. Y podemos interactuar con toda la forma interactiva de la página. Podemos ver los eventos. Podemos ver, por ejemplo, en otro ejercicio que tenemos en switch, podemos interactuar con el documento. Entonces, la principal diferencia si estás usando state, use effects, o puedes interactuar con la browser API, necesitas usar el use client. Necesitas poner eso como un componente del cliente, porque estás interactuando con la API del navegador.
Comments