Componentes del Servidor sin Tamaño de Paquete

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.

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.

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.

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.

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.