Componentes del Servidor al Rescate: Turboalimentando y Potenciando Tus Aplicaciones React con Estilo

Bienvenidos a los componentes del servidor al rescate, turbo cargando y potenciando su aplicación de React con estilo. ¿Quién soy? Soy Phillipa Perez Ponce, soy ingeniera de software y frontend lockads y compartición de volumen. Y hoy me gustaría hablar sobre los componentes del servidor de React.

Antes de eso, hace casi tres años, especialmente el 21 de diciembre de 2020, el equipo de React nos presentó por primera vez los componentes del servidor de React. Antes de eso, conocíamos la interacción entre servidor y cliente. Como tenemos los datos en el servidor, tenemos las interacciones de la interfaz de usuario en el cliente. Así que, empezamos a usar la renderización del lado del cliente, y la renderización del lado del cliente es así. Tenemos un servidor, tenemos un dispositivo, y le preguntamos al servidor sobre la página. Y HTML, pedimos el paquete, y JavaScript, CSS, devuelve el paquete. Y vimos el paquete, hicimos todas las cosas, y pedimos los datos. Y devuelve los datos. Y terminamos en render la página. Esto parece nuestro primer pintado, nuestras interacciones de página. Está bien. Nuestro contenido completo, pintado completo. No es tan bueno. Es un poco realmente caro. Nuestras métricas no son buenas. Nuestros usuarios no tienen una buena experiencia. Sufren. Nosotros sufrimos. Nuestro pintado aumenta. Así que probamos diferentes herramientas, diferentes arquitecturas, diferentes renderizaciones. ¿Para qué? Para evitar esto para tratar de tener mejores métricas, para tratar de tener una mejor, mejor experiencia. Mejor experiencia de usuario. Así que ese día, los componentes del servidor de React nos trajeron con una idea, tres ideas. Fácil de mantener, rápido de construir, métricas mejoradas, mejorada experiencia de usuario. Y puedes usarlo en tu renderización favorita. ¿Y cuáles son los beneficios? ¿Por qué estás usando eso para estas tres ideas solamente? No, estamos usando esto porque tiene una mejor ventaja. Como estamos usando el servidor,

¡Cascada de servidor no cliente! Esto es porque eliminamos el tipo incorrecto. Entonces, tienes esto que está bien. Tienes el HTML. Tienes el paquete. Ve al paquete y ve con los data. Entonces, entonces, esta vez, construye la cosa y construye la página. Entonces, no tienes esto, está bien, necesito el paquete. Necesito los data. Y lo tienes todo en una sola solicitud.

Evita las tareas de atracción. Esto es porque los componentes del servidor reducen el costo de las atracciones. Puedes poner toda la lógica, la lógica del producto en el servidor, y puedes tener varias capas de las atracciones. Y esto solo lleva al cliente que todos estos elementos de renderizado para el cliente están listos. Así que la vista es más agradable y agradable de tener de una manera que tienes solo ese renderizado puro. Y el mismo desafío en Soluciones Unificadas, tienes el mismo código para solución. Tienes el mismo código para en el servidor, tienes el mismo código en el cliente. Así que no necesitas tener un lenguaje diferente para el servidor y para el cliente. Puedes tener todo en un solo lugar. Primero, hablamos sobre nuestros React Server components. Hablamos sobre los beneficios, y ahora ¿quién es React Server components? Tenemos componentes del cliente que viven en los clientes, viven en el navegador. Y tenemos los componentes del servidor, que viven en los servidores. Esta es nuestra primera parte de la situación en los Componentes del Servidor de React, nuestros React components y 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.

Nuestros componentos de servidor son diferentes. Nuestros componentes de servidor son envoltorios. En ese caso, por ejemplo, la definición de la palabra es solo un analizador de la información. Y trae con un componente aislado al servidor, al cliente. Este es el primer paso. Vemos que tenemos un componente de servidor que puede tener componentes de cliente y de servidor. Pero si tienes un padre que es un componente de cliente, solo puedes tener componentes de cliente como hijos. Aquí está el ejemplo. Tenemos nuestro interruptor, tenemos nuestra definición, tenemos nuestra entrada. Continuamos.

Entonces, aquí estamos en nuestro ejemplo. Esta forma en que usamos el componente del servidor de React, que estamos usando React server components, impacta nuestras métricas. Aquí está el mismo código, es el mismo valor, es un paquete, tienes en la primera pintura de contenido la misma métrica. En tiempo para interrumpir, tienes eso, es el mismo tiempo, porque pasas el mismo tiempo para construir todos los componentes y construir toda la interfaz de usuario. Y nuestro pintor de contenido grande, que era tan excesivo. Aproximadamente tres segundos, hacemos una gran disminución. Un segundo. Mucho. Y esto es porque no tenemos esta ronda de trato porque estamos pidiendo la información en el servidor, analizamos la información y traemos la información, la interfaz de usuario al cliente lista. Esto evita la ronda de trato, esto evita la cascada.

Tenemos limitaciones con el componente del servidor de React, tenemos almacenamiento local porque no podemos usar el almacenamiento local. No podemos usar el Bluetooth en el componente del servidor porque estamos en el servidor. No podemos usar el web-use CV. No podemos usar un estado, usar una grasa, usar un reductor. Porque no podemos usar varias cosas. No podemos usar la API del navegador, no podemos usar los interactivos. ¿Cuál es el futuro para el componente del servidor de React? Como se dice en la publicación de marzo de 2020, 2023, estas capacidades de interacción funcional entre el servidor y el cliente, esto es una de las cosas. Esto es una cosa que incluye mejorar la sincronización del estado entre el servidor y el cliente. Enviando datos del cliente al servidor para ejecutar la mutación de datos tal vez, y alguna mejora en la fórmula. La otra cosa es permitir al componente del servidor hacer un re-renderizado en respuesta a los cambios de estado. Tal vez mantener el lado del cliente interactuado y permitir actualizaciones fluidas de la interfaz de usuario sin refrescar toda la página. Estas son algunas características, y si quieres ver y te sientes más curioso acerca del código, puedes hacer una inspección en ese repositorio, y si tienes algunas dudas, puedes contactarme en Twitter. Gracias.