React Server Components (RSC) está revolucionando la arquitectura front-end. Es posible que haya escuchado el nombre, pero ¿sabe exactamente en qué se diferencia de SSR (renderización del lado del servidor) y qué tipo de procesamiento se produce detrás de escena? En este artículo, profundizaremos en su mecanismo técnico y consideraremos ejemplos de su uso práctico.
Diferencia definitiva de SSR
SSR convencional era una tecnología que generaba HTML en el lado del servidor durante la carga inicial y lo devolvía al navegador. Pero luego el navegador tuvo que cargar JavaScript y volver a ejecutar (hidratar) el componente para hacerlo interactivo. En otras palabras, el código del componente en sí finalmente se descargaba en el navegador.
RSC, por otro lado, es un componente que se ejecuta sólo en el servidor y nunca se envía al navegador. Una vez que el servidor procesa el RSC, se serializa en un formato especial similar a JSON en lugar de HTML y se envía al cliente. El lado del navegador simplemente recibe estos datos y los refleja en el DOM.
Reducción drástica del tamaño del paquete
El mayor beneficio de este mecanismo es la reducción del tamaño del paquete de JavaScript enviado al lado del cliente. Por ejemplo, suponga que desea utilizar una biblioteca pesada (como “marcada”) que convierte las rebajas a HTML. Si implementa esto con RSC, todo el análisis se realiza en el servidor, por lo que no se descarga ningún código de biblioteca pesado en el navegador del usuario. Esta es una mejora revolucionaria en el rendimiento para entornos móviles.
El diseño de los límites del cliente es clave.
Lo más problemático cuando se trabaja con RSC es diseñar los límites entre los componentes del servidor y del cliente.
Dado que RSC se ejecuta en el servidor, no puede tener controladores de eventos como onClick o administración de estado (useState). Sólo los componentes finales (botones y formularios de entrada) que los requieran deben convertirse en componentes del cliente.
Se requiere una filosofía de diseño de estructura de árbol en la que “la adquisición de datos y el procesamiento pesado se realicen en la capa superior del árbol (servidor), y sólo las partes de las hojas que requieren operaciones del usuario se utilicen como clientes”.
Ejemplos de uso práctico
En la práctica, RSC brilla más en los siguientes casos de uso:
- Visualización de blogs y artículos multimedia: Al igual que la conversión Markdown mencionada anteriormente, RSC es único en la representación de contenido estático.
- Acceso directo a la base de datos: Dado que RSC es un entorno de servidor, puede enviar consultas de forma segura directamente a la base de datos. Dado que se puede omitir una capa de API, se puede ahorrar esfuerzo de desarrollo.
- Páginas de destino centradas en SEO: Cargas iniciales rápidas y sin JS adicional, lo que mejora directamente su puntuación de Core Web Vitals.
RSC no pretende reemplazar el React existente, sino que es una nueva arma para aclarar la “división de roles” entre cliente y servidor. Comprender correctamente este mecanismo e incorporarlo adecuadamente en el diseño será la clave para el futuro desarrollo front-end.