React Components for both the Client & the Server

Hola, amigos. ¿Recuerdan los componentes del servidor? ¿Los usan o incluso les gustan? Porque a mí sí. De hecho, me gustan todo tipo de componentes de UI, ya sean componentes del cliente o del servidor. Soy Kiko, y construyo componentes de UI para ganarme la vida, añadiendo progreso para desarrolladores de todo el mundo. Y hoy quiero compartir con ustedes cómo construí componentes de UI tanto para el cliente como para el servidor.

Así que una vez más, soy Kiko. Estoy construyendo componentes de UI tanto para el cliente como para el servidor. Así que cuando los componentes del servidor fueron anunciados inicialmente, trajeron todo tipo de mejoras de rendimiento como un tamaño de paquete más pequeño y una mejor obtención de datos. Así que naturalmente, el desarrollador dentro de mí realmente quería reconstruir toda mi interfaz de usuario para ser componentes del servidor. Un pequeño comentario al margen, si me preguntan, deberían haber sido simplemente llamados componentes de React sin el botón de servidor. Lo que sea.

Así que al reconstruir toda mi interfaz de usuario a componentes del servidor, incluso construí el botón de servidor más pequeño, que realmente no era tan útil. Pero otros componentes como una tabla de datos que realmente podría beneficiarse de los componentes del servidor como una característica fue un experimento interesante. Así que lo que terminé teniendo al construir una tabla de datos del servidor fueron dos componentes diferentes. Por un lado, tenemos una tabla de datos del servidor completamente estática. Tiene casi cero JavaScript enviado al cliente y también tenía acceso a mi sistema de archivos e incluso a mi base de datos. Por otro lado, tenía una tabla de datos del cliente, algo que era interactivo, algo que podía virtualizar al tener acceso al DOM real. Así que esos dos componentes terminaron en dos carpetas diferentes, lo cual probablemente está bien si estás construyendo tu publicación de blog personal.

Pero para mí, estoy construyendo una biblioteca de UI reutilizable. Estoy enviando esos componentes a NPM y a equipos en toda mi organización. Así que naturalmente termino con mucha duplicación de código. Tengo un componente del servidor y un componente del cliente, que tuve que mantener. Pero al final del día, eran algo similares. Ambos estaban renderizando roles y esos roles estaban renderizando celdas. Así que quería mantenerlos algo similares. Y también los requisitos pueden cambiar.

Si estás comenzando desde un servidor, en algún momento, puedes necesitar añadir interactividad. Y si estás comenzando desde el cliente, en algún momento, puedes querer externalizar una pieza específica de trabajo al servidor. Así que naturalmente, lo que voy a desafiar hoy es ¿no podemos tener ambos? Así que esto está algo resuelto a nivel de aplicación en React a través del patrón de composición, que sigue dos reglas realmente simples. Básicamente, los componentes del servidor pueden renderizar componentes del cliente, pero lo contrario no es cierto. Pero hay un pequeño truco para esto. Así que puedes insertar hijos del servidor dentro de componentes del cliente sin que los componentes del cliente sepan sobre ellos.

Y cuando llegas a un punto en tu aplicación donde consumes una biblioteca de terceros, es usualmente una caja negra desde entonces. Y las bibliotecas de UI naturalmente se predeterminan a componentes del cliente. Y no tienes control sobre ellos, lo que está sucediendo en su árbol de renderizado. Y hoy, quiero intentar construir una tabla de datos junto con ustedes para ver cómo podemos tener lo mejor de ambos mundos. Tengo mi Chrome abierto. Tengo mi cursor abierto. Así que comencemos a construir desde cero. Así que voy a importar una tabla de datos y he preparado algunos datos de antemano. Usualmente cómo construyo la tabla de datos.

es a través de esas dos propiedades principales, que son las filas y las columnas. Y comencemos a construir la tabla desde allí. Está aceptando las nuevas propiedades y ¿qué estaría renderizando? Estaría renderizando un encabezado de tabla y un cuerpo de tabla y dentro del cuerpo de la tabla, vamos a estar renderizando algunas filas pasando nuevamente a las filas, excepto columnas y un dato y las filas están renderizando celdas de datos, que son los componentes reales que están haciendo la renderización de datos.

Así que termina con este componente y vas a ver el resultado muy pronto. Simplemente quiero renderizar los datos aquí. Reiniciando nuestro servidor de desarrollo, podemos ver una bonita tabla de datos con cuatro columnas y tres filas. Así que si has intentado construir tal tabla de datos, rápidamente llegarías a la conclusión de que necesita principalmente código del cliente en casi cualquier nivel, ya sea para accesibilidad, para eventos de ratón o teclado, lo que sea.

Así que agreguemos algo de interactividad a nuestra tabla de datos. Podemos agregar un evento de clic a nuestros datos para tener qué tener selección así. Ups, obtenemos un error. Esta es una aplicación de Next.js y por defecto los componentes son del servidor. Así que para hacer que esto funcione y podamos usar el estado reactivo, debemos agregar la directiva use client aquí y todo parece estar funcionando. Al hacer clic en la fila, se cubre de azul. Así que tenemos algún tipo de reactividad. Pero si exploramos nuestra tabla de datos, podemos ver que hay un poco de markdown aquí en esta celda.

Y cómo procedo a construir tal personalización es proporcionando una celda personalizada. Así que intentemos construir esto en nuestra aplicación. Así que he preparado una celda de markdown de antemano. Te la mostraré muy pronto y la pasaré por aquí. Yendo a la tabla, necesitamos agregarla a la interfaz de props y en la fila de datos actual aceptándola. Queremos renderizarla si se proporciona en lugar de la celda predeterminada así. Sí.

Así que veamos qué está sucediendo aquí. Nuevamente, tenemos un error de que no podemos pasar una función a un componente del cliente. Lo que esto significa es que nuestra celda de markdown no es un componente del cliente nuevamente. Y nuestra fila de datos es un componente del cliente. ¿Y recuerdas las dos reglas? Los componentes del cliente no pueden renderizar componentes del servidor. Así que para hacer que esto funcione, debemos agregar la directiva use client aquí. Nuevamente, la selección está funcionando.

Pero si miramos de cerca, hay un fragmento de código dentro del markdown. Y tengo un poco de miedo del resaltado de sintaxis, especialmente en los markdowns, porque a menudo vienen con alguna biblioteca grande y pesada, que es responsable del resaltado. Así que solo para hacer una prueba rápida, construiría rápidamente nuestra aplicación y he preparado un plugin de Webpack de antemano para mostrarnos qué terminaría en nuestro paquete del cliente. Así que este sería el paquete del cliente. Casi un tercio de él está relacionado con el resaltado de sintaxis y el procesamiento de markdown. ¿Y cómo evitamos eso? ¿Cómo hacemos que este código de terceros permanezca en el servidor y nunca termine en el cliente? Obviamente, no podemos renderizar un markdown en el servidor si todo nuestro árbol de renderizado está en el cliente.

Entonces, lo que intentaríamos hacer es lograr el patrón de composición, pero a nivel de componente. Así que si intentamos separar las partes del cliente de un componente, en nuestro caso, eso sería la fila de datos, deberíamos quedarnos con algo que llamo una parte agnóstica, una parte que podría ser renderizada tanto como un componente del cliente o un componente del servidor. Y usualmente pensamos en el patrón de composición como que debemos proporcionar diferentes componentes. Pero aquí vamos a dividir un solo componente en dos partes. Esta sería nuestra composición, una parte del cliente del componente y una parte agnóstica del componente. Esta es la visualización de lo que intentaré lograr a través del código.

Así que tenemos todo el árbol siendo agnóstico y cada vez que necesitemos un código del cliente, simplemente lo envolveríamos como una capa del cliente. Entonces, ¿cómo se vería eso en nuestro ejemplo con la fila de datos? Primero, quiero eliminar esta directiva use client y luego importaría un componente de fila de datos del cliente e intentaría envolver mi renderización agnóstica en esta parte del cliente de mi componente, eliminar el use state y eliminar el manejo de eventos. Iniciando mi servidor de desarrollo una vez más solo para asegurarme de que todo funcione. Ahora tengo que ir y realmente crear nuestro archivo que sería así.

Primero, agreguemos la directiva use client. Comienzo desde esta plantilla donde en lugar de renderizar elementos condicionales, clono mi parte agnóstica y simplemente agrego el manejo de eventos del cliente y la lógica que quiero lograr. En nuestro caso, eso sería la selección. Así que con esto en mente, veamos si esto funciona. Sí, el evento de clic está funcionando. Ahora vamos a nuestra celda de markdown y eliminemos la directiva use client para ver si todavía funciona. Sí, todavía funciona. Y si no me crees que este código se quedaría en el servidor, usaría una nueva utilidad, que se llama server only. Así que puedo importar server only para asegurarme. Y si aún no me crees, haríamos una compilación rápida de nuestra aplicación. Dándole solo un segundo.

Ahora, la gran biblioteca de markdown y resaltado de sintaxis se queda en el servidor, por lo que no se enviará a nuestros clientes, que es exactamente la optimización de rendimiento que estamos buscando. Así que volviendo a nuestro servidor de desarrollo, lo que básicamente logramos es que al mantener todo el árbol de renderizado agnóstico, extrayendo las partes del cliente, podemos renderizar componentes del servidor en lo profundo del árbol. En nuestro caso, eso será la celda. Y esto nos permite mantener el evento on click a nivel de fila. Pero nuevamente, la lógica real del cliente, que agrega el evento on click, está en un componente separado y no interfiere con el árbol de renderizado en absoluto. Y quiero alejarme un poco para mostrarte cómo las diferentes partes de tu componente más grande pueden interactuar entre sí.

Y más específicamente, las diferentes partes del cliente de tu componente pueden interactuar entre sí. Y el ejemplo que he preparado es como hagamos una selección única. Así que tendríamos un código común del cliente, que se encarga de tener solo una fila seleccionada. Cómo abordaría esto es que agregaría un envoltorio del cliente en mi tabla de datos. Así que en la parte superior de mi componente, nuevamente, envolvería mi renderizado predeterminado con él de esa manera. De hecho, crearé el archivo. Y comenzando con una directiva de cliente suelta, esta vez no tuve que clonar mi parte agnóstica porque no estoy agregando nada. Solo lo estoy envolviendo en un contexto. Así que eso sería el contexto de estado. Y mantendría la selección dentro de él.

Envolviendo mis hijos dentro de él, yendo ahora al cliente de fila. Ahora, en lugar de mantener el estado aquí, estaría usando el estado global de mi componente de tabla de datos de esa manera. Y estaré cambiando la selección de única a, de múltiple a única. Necesitaría un ID para esto. Y con este código, deberíamos poder tener selección única. Sí, que se mantiene en nuestro componente más alto, que sería nuestra tabla de datos. Y las diferentes partes del cliente de nuestro complejo árbol de renderizado se comunicarían entre sí sin interferir con el árbol de renderizado real. Así que la parte agnóstica, la parte importante, intenta mantener la mayor parte de tu árbol de renderizado agnóstico. Intenta extraer la funcionalidad del cliente en diferentes archivos, que simplemente envuelven tus partes agnósticas.