Video Summary and Transcription
Los Componentes del Servidor de React son una característica reciente introducida por el equipo de React y lanzada con Next.js 12. Permiten renderizar componentes en el servidor, mejorando el rendimiento y la obtención de datos. Los componentes del servidor se pueden utilizar junto con el renderizado en el lado del cliente y proporcionan acceso directo a los recursos del servidor. Sin embargo, todavía se encuentran en la etapa experimental y tienen algunas limitaciones, como no poder utilizar hooks o controladores de eventos. Los desafíos incluyen la importación de componentes del servidor en componentes del cliente y realizar llamadas a API de terceros.
1. Introducción a los Componentes del Servidor de React
Los Componentes del Servidor de React son una característica reciente introducida por el equipo de React y lanzada con Next.js 12. Hoy hablaré sobre las estrategias de renderizado, el renderizado del lado del cliente y el renderizado del lado del servidor. Luego hablaré sobre los Componentes del Servidor de React, cómo son diferentes del renderizado del lado del servidor y cómo podemos usarlos en nuestra aplicación. También veremos los beneficios de rendimiento al usar los Componentes del Servidor de React. Por último, también hablaré sobre algunos desafíos que pueden surgir al intentar usar los Componentes del Servidor de React en tu aplicación existente. En el renderizado del lado del cliente, el servidor envía un HTML en blanco con una etiqueta de script con el origen bundle.js. Con el renderizado del lado del servidor, el servidor envía un HTML completamente renderizado y el navegador lo compara con la página generada. Uno de los grandes beneficios del renderizado del lado del servidor es una mejora en el FCP. Sin embargo, solo se puede utilizar el renderizado del lado del servidor en la primera carga y el estado de los componentes no se mantiene al cambiar de ruta.
Los Componentes del Servidor de React. Los Componentes del Servidor de React es una característica reciente introducida por el equipo de React y lanzada con Next.js 12. Hoy hablaré sobre las estrategias de renderizado, que son principalmente el renderizado del lado del cliente y el renderizado del lado del servidor. Luego hablaré sobre los Componentes del Servidor de React, qué son los Componentes del Servidor de React, cómo son diferentes del renderizado del lado del servidor y cómo podemos usarlos en nuestra aplicación. También veremos los beneficios de rendimiento al usar los Componentes del Servidor de React.
Luego haremos todo el código, una codificación en vivo y veremos todo en funcionamiento. Por último, también hablaré sobre algunos desafíos que pueden surgir al intentar usar los Componentes del Servidor de React en tu aplicación existente.
Un poco sobre mí, mi nombre es Asima. Soy una Ingeniera Front-End Senior que trabaja en Ámsterdam. En mi tiempo libre, me gusta crear videos de Front-End. Puedes contactarme en LinkedIn, Twitter.
Entonces, finalmente hablando sobre las estrategias de renderizado, tenemos el renderizado del lado del cliente y el renderizado del lado del servidor. En el renderizado del lado del cliente, cuando un usuario solicita un sitio web, el servidor envía un HTML en blanco con una etiqueta de script con el origen bundle.js. Luego, el navegador descarga el archivo JS, se carga React y se envía una solicitud para obtener los datos del servidor. Después de recibir los datos del servidor, el contenido se vuelve visible. Este enfoque funciona muy bien para construir sitios web altamente interactivos para el usuario, ya que puedes volver a cargar los componentes que han cambiado en lugar de volver a cargar toda la página. Sin embargo, el problema surge a medida que enviamos más y más código a nuestro paquete JS. El tamaño del paquete aumenta y el navegador tarda tiempo en descargarlo, lo que provoca un FCP retrasado. Además, con el renderizado del lado del cliente, hay problemas de SEO y no se pueden ejecutar en dispositivos sin JavaScript.
Tenemos otra estrategia, que es el renderizado del lado del servidor. En el renderizado del lado del servidor, cuando un usuario solicita un sitio web, esta vez el servidor envía un HTML completamente renderizado, pero este HTML es estático. Entonces, lo que hace el navegador es que paralelamente también descarga el archivo JS, luego se realiza la comparación entre la página generada por el navegador y la que se envía desde el servidor. Esto es lo que llamamos hidratación. Después de la hidratación, React toma el control y el contenido se vuelve interactivo. Uno de los grandes beneficios que obtenemos del SSR es una mejora en el FCP porque el navegador no tiene que esperar a que el cliente genere un HTML y muestre el contenido al usuario. También se resuelve el problema de SEO, pero uno de los problemas con el SSR es que solo se puede utilizar el renderizado del lado del servidor en la primera carga. Después de eso, después de la hidratación, la aplicación se comporta como una aplicación renderizada del lado del cliente normal. Ahora algunos de ustedes podrían decir que en Next.js, puedes crear múltiples rutas y en cada ruta puedes utilizar el renderizado del lado del servidor. Pero lo que sucede es que al cambiar entre esas rutas, el estado de los componentes no se mantiene. Esta es una de las principales diferencias entre el renderizado del lado del servidor y los Componentes del Servidor de React.
2. Explorando los Componentes del Servidor de React
Los componentes del servidor de React se renderizan en el servidor, mientras que algunos componentes se renderizan en el cliente. Esto es diferente al renderizado del lado del servidor, donde todos los componentes se convierten en HTML sin formato y se envían al cliente. Los componentes del servidor de React se pueden usar junto con el renderizado del lado del servidor.
Entonces, hablando de los componentes del servidor de React, como sugiere el nombre, los componentes del servidor de React se renderizan en el servidor. Ahora, el objetivo final para el navegador es generar un árbol DOM. Si estás utilizando el renderizado del lado del cliente, todos los componentes en un árbol DOM de React se renderizan en el servidor. Si utilizas el renderizado del lado del cliente, todos los componentes se renderizan en el cliente. Si utilizas el renderizado del lado del servidor, todos los componentes se renderizan en el servidor. Sin embargo, con los componentes del servidor de React, algunos de los componentes se renderizan en el servidor y algunos se renderizan en el cliente. Y cuando digo que los componentes se renderizan en el servidor, no significa renderizado del lado del servidor. Porque en el renderizado del lado del servidor, lo que sucede es que todos los componentes, ya sea un componente del servidor o un componente del cliente, se convierten en HTML sin formato y se envían al cliente. De hecho, los componentes del servidor de React se pueden usar junto con el renderizado del lado del servidor.
3. Renderización de Componentes en el Servidor
Cuando un usuario solicita una página, se puede utilizar el renderizado del lado del servidor para la solicitud inicial, enviando una respuesta HTML. Las solicitudes posteriores pueden ser realizadas por el cliente para los componentes del servidor, que se envían como un objeto similar a JSX. La renderización de componentes en el servidor permite un acceso rápido a los recursos del servidor, una recuperación de datos más rápida y una mayor seguridad.
Entonces, lo que puedes hacer es que cuando un usuario solicita una página, por primera vez puedes utilizar el renderizado del lado del servidor. Y esta vez el servidor enviará un HTML. Y la próxima vez, al cambiar entre las rutas, el cliente puede solicitar un componente del servidor, y esta vez el servidor enviará un objeto similar a JSX, que se ve algo así.
Entonces, si lo miras claramente, la respuesta que estamos obteniendo es parte de los archivos del cliente y parte de los archivos del servidor. Ahora, si prestas atención al archivo del cliente, lo que se envía desde el servidor es solo la referencia del archivo y los fragmentos están vacíos. Sin embargo, con el archivo del servidor, ya se envía y se renderiza desde el servidor.
Ahora, ¿por qué querrías renderizar componentes en el servidor? Uno de los beneficios es que si el componente ya está en el servidor, puede acceder directamente a la base de datos y al sistema de archivos, lo que significa que puede acceder rápidamente a los recursos del servidor, lo que significa que la recuperación de data se vuelve realmente rápida en comparación con hacer una llamada de búsqueda desde el cliente. Además, el servidor es bueno para realizar cálculos. Por lo tanto, puedes obtener cálculos más rápidos y también, con fines de security, puedes optar por mantener los datos sensibles en el servidor en lugar de enviarlos al cliente. Por lo tanto, la idea principal detrás de RSC es permitir que el servidor haga lo que mejor sabe hacer antes de entregar las cosas al navegador.
4. Componentes del Servidor y Aplicación de Correo Electrónico
Los componentes del servidor permiten una recuperación rápida de datos y un mejor rendimiento. Se pueden utilizar junto con el renderizado del lado del cliente para optimizar la interactividad. Los componentes del servidor no se incluyen en el paquete del cliente, lo que resulta en un tamaño de paquete más pequeño. Proporcionan acceso directo a la base de datos y al sistema de archivos. Los componentes del servidor de React todavía están en la etapa experimental y solo son compatibles en Next.js. Hay reglas que seguir al usar componentes del servidor, como guardar archivos con extensiones específicas y pasar props serializados a los componentes del cliente. Los componentes del servidor no pueden usar hooks ni controladores de eventos. Se requieren pasos de configuración para comenzar a usar componentes del servidor. En esta parte, crearemos una aplicación de correo electrónico con componentes de lista de correo electrónico y cuerpo de correo electrónico.
Entonces, lo que el servidor es bueno en es recuperar datos rápidamente y tener un mejor rendimiento. Por lo tanto, puedes elegir hacer todas las cosas relacionadas con el rendimiento, como la renderización pesada, en el servidor y dejar que el cliente se encargue de la parte de interactividad. Todo el código que hacemos dentro del componente del servidor no se envía al paquete del cliente, lo cual es un gran beneficio en términos de rendimiento porque no agrega ningún KB al tamaño del paquete. Además, obtenemos acceso directo a la base de datos y al sistema de archivos con los componentes del servidor.
Ahora, lo que se envía desde el servidor es el componente del servidor renderizado y los marcadores de posición del cliente. Entonces, cuando ocurre la eliminación de árbol, solo se vuelven a buscar los componentes del servidor, lo que significa que se mantiene el estado de los componentes del cliente. Ahora todos ustedes deben estar sintiendo como que está sucediendo, pero veremos todo en la codificación. Ahora los componentes del servidor todavía están en estado experimental y solo son compatibles en Next.js. Por lo tanto, si quieres probarlos, debes usar Next.js. Hay un marco creado por Hydrogen, por Shopify, que es Hydrogen. Utiliza los componentes del servidor de React y siéntete libre de consultar la documentación, es realmente interesante cómo han utilizado los componentes del servidor.
Ahora hay un par de reglas que debemos seguir cuando necesitamos usar los componentes del servidor de React. Solo los leeré. En primer lugar, debes guardar los archivos con la extensión .server.js y .client.js porque esto le indica a React qué componentes se deben renderizar en el servidor y qué componentes se deben renderizar en el cliente. Por lo tanto, nuestros componentes solo pueden pasar props serializados a los componentes del cliente, lo que significa que no puedes pasar funciones. Los componentes del cliente no pueden importar componentes del servidor y los componentes del servidor no pueden usar hooks como useState o ningún controlador de eventos. También necesitas realizar algunas configuraciones para comenzar a usarlos. Debes instalar nextcanary react-rc y react-dom-rc. Además, en tu next.config.js, debes activar las flags de componentes del servidor también.
Ahora creemos un componente del servidor. Lo que vamos a crear hoy es una aplicación de correo electrónico. Tiene una lista de correos electrónicos y al hacer clic en cualquiera de las tarjetas de correo electrónico, se debe abrir el cuerpo del correo electrónico. En nuestra aplicación hay dos componentes principales. Uno es la lista de correos electrónicos y el otro es el cuerpo del correo electrónico. Primero escribamos el componente de lista de correos electrónicos. Lo primero que haré es recuperar los correos electrónicos. Ahora recorreré los correos electrónicos y para cada correo electrónico mostraré el nombre, el asunto, la descripción y la fecha. Aquí, en lugar de pasar la fecha sin formato, importaré una función y pasaré la fecha formateada. Ahora el componente de lista de correos electrónicos se ve algo así. Lo que voy a hacer ahora es dividir este componente en dos componentes.
5. Estructura del Componente del Servidor
Un componente es el componente contenedor utilizado para recuperar datos, y el otro es el componente de vista para todo lo relacionado con la vista. El archivo del servidor se renderiza en el servidor y el archivo del cliente se renderiza en el cliente. No se pueden pasar funciones al componente del cliente.
Entonces, uno es el componente contenedor, que se utilizará para recuperar data, y el otro es el componente de vista, que tendrá todo lo relacionado con la vista. Ahora he dividido este componente en dos componentes. Ahora cambiaré el nombre de los archivos a .server y .client.js, porque quiero que el archivo del servidor se renderice en el servidor y el archivo del cliente se renderice en el cliente. Ahora voy a importar la lista de correos electrónicos, el componente de vista en mi componente del servidor. Ahora, una cosa a tener en cuenta aquí es que en las props, solo puedes agregar aquellas props, que se pueden serializar a través de la red, lo que significa que no puedes pasar ninguna función al componente del cliente. Así es como se ve mi archivo del servidor, y como se renderiza en el servidor, en lugar de fetch, también podemos leerlo desde la base de datos o leerlo directamente desde el sistema de archivos.
6. Recursos, Descripción General de la Aplicación y Desafíos
Para obtener más recursos, consulta el blog de Dan Abramov sobre componentes del servidor sin paquetes. Explora la documentación de Next.js y la aplicación en vivo. Nuestra aplicación presenta tarjetas de correo electrónico y mantiene el estado al cambiar de ruta. Los desafíos incluyen importar componentes del servidor en componentes del cliente, usar hooks en componentes del servidor y realizar llamadas a API de terceros.
Para obtener más recursos, puedes consultar el blog de Dan Abramov que introduce componentes del servidor sin paquetes, y luego puedes consultar la documentación de Next.js, y también hay una aplicación en vivo, Next.js ha creado una aplicación a la que puedes hacer referencia para crear tu propia aplicación. Ahora veamos lo que hemos construido hasta ahora. Esta es nuestra aplicación, que son como tarjetas de correo electrónico, y al hacer clic en la tarjeta, se abre el cuerpo del correo electrónico. Ahora veamos qué se envía al cliente. Al hacer clic en la segunda tarjeta, esto es lo que se ve la respuesta, y esto es lo que también vimos en la captura de pantalla. Entonces envía los archivos del cliente, la referencia del nombre de archivo, y esto será utilizado por el navegador para generar el archivo del cliente más adelante, y luego este es un archivo del servidor completamente renderizado, por lo que el servidor está enviando algo como un objeto similar a JSX, La segunda cosa que quiero señalar aquí es que al abrir el webpack, y aquí tenemos componentes, y en los componentes tenemos el cuerpo del correo electrónico, y la tarjeta de correo electrónico y la lista de correos electrónicos. Entonces, si te fijas aquí, todos los archivos que se envían son los archivos del cliente, y no hay archivo del servidor, por lo que ninguno del código del servidor se envía al paquete del cliente. Otra cosa a tener en cuenta aquí es que, al marcarlo como importante, ahora cambiaré a otra ruta. Así que voy a marcar como importante la segunda ruta. Ahora mi ruta cambia, ¿verdad? Entonces se abre el correo electrónico slash dos, pero el estado se ha mantenido, por lo que se ha mantenido lo importante anterior. Pero si estuvieras usando solo el Next.js sin los componentes del servidor de React, lo que sucedería es que se actualizaría toda la página, por lo que habríamos perdido el estado. Entonces, no importa cuántas rutas cambiemos, se mantiene todo el estado. Ahora hablemos de algunos de los desafíos a los que podemos enfrentarnos al usar componentes del servidor. El primer desafío es que los componentes del cliente no pueden importar componentes del servidor. Y lo que quiero decir es que supongamos que tenemos un componente del cliente, mi componente del cliente, y tratemos de importar un componente del servidor, pero esto no funciona. Entonces, en lugar de usarlo así, lo que podemos hacer es usar la composición. Entonces podemos pasar el componente del servidor como hijos. Y así es como lo usaremos. Podemos componer el componente del servidor de React dentro del componente del cliente. El siguiente desafío al que puedes enfrentarte es usar hooks dentro de los componentes del servidor porque se renderizan en el servidor. Entonces no puedes usar state, useEffect, nada. Así que asegúrate de que cuando quieras usar estados, divides tus componentes en componente del cliente y componente del servidor. Así puedes dejar todos los estados y dejar que vayan a un componente del cliente. Y el otro desafío más grande es hacer una llamada a una API de terceros dentro de los componentes del servidor. Porque al hacer la llamada a terceros también se necesita renderizar los data en el servidor. Y luego puedes pasar los data renderizados a tu componente usando get static props si estás usando Next.js. Ahora, veamos por qué necesitamos un marco de trabajo. ¿Por qué queremos usar Next.js para usar componentes del servidor de React? Y eso es porque para los componentes del servidor de React, necesitamos configuraciones en todos los niveles, que son el renderizado, el enrutamiento y también el empaquetado. Y Next.js proporciona todas esas configuraciones internamente en este momento. Y por eso el equipo de React ha decidido lanzar los componentes del servidor de React con los marcos de trabajo. Entonces, esto es cómo se ve nuestro código, nuestra estructura de carpetas. Cada componente tiene un archivo del cliente y un archivo del servidor. Entonces tendremos dos archivos del servidor, y los dos archivos del cliente que se renderizan en el cliente. Así que ahora podemos decir prácticamente que cada desarrollador de front-end es un desarrollador full-stack. Gracias por asistir a mi charla. Puedes contactarme en Twitter o LinkedIn, y aquí está el enlace a las diapositivas. La aplicación de correo electrónico también está en GitHub, así que no dudes en echarle un vistazo.
Comments