¿Qué son los React Server Components (RSC)?

Los React Server Components son una primitiva de renderizado de React en la que los componentes se ejecutan exclusivamente en el servidor y nunca envían JavaScript al cliente. Producen una UI serializada que se transmite (stream) al navegador y se combina con componentes cliente tradicionales para la interactividad. Para los storefronts de composable commerce, RSC es el cambio más importante en React desde los hooks.

Definición

En un framework con soporte RSC como el App Router de Next.js o las variantes experimentales de SvelteKit y Remix, los componentes se clasifican como de servidor o de cliente. Los componentes de servidor pueden obtener datos directamente de bases de datos, APIs de comercio o un content-management-system-cms mediante el sistema de archivos o las APIs de fetch, devuelven un árbol de React serializado y se eliminan por completo del bundle de cliente (tree-shaking). Los componentes de cliente, marcados con use client, siguen siendo interactivos y se envían como first-party-JS. El framework combina ambos durante el streaming-ssr, enviando primero las partes estáticas y después las islas interactivas. Esto se alinea de forma natural con el edge rendering y las primitivas de capa de caché modernas.

Por qué es importante

El mayor coste en los storefronts modernos de React es el tamaño del bundle de cliente y el trabajo de hidratación resultante, ambos perjudiciales para el INP. RSC traslada la obtención de datos, el templating e incluso las librerías de formateo pesadas al servidor, dejando en el cliente solo los componentes realmente interactivos. El tamaño del bundle en las PDP y las PLP suele reducirse entre un 40 y un 70 por ciento. Como los componentes de servidor transmiten HTML, el LCP también mejora. RSC además simplifica el acceso a los datos: en lugar de obtenerlos en useEffect, los componentes esperan (await) los datos durante el renderizado, lo que elimina las cascadas (waterfalls) del lado del cliente.

Casos de uso

Los equipos de composable commerce sobre Next.js trasladan su listado de productos, la descripción de categoría, el faceting y el contenido SEO a componentes de servidor, mientras mantienen el carrito, los selectores de variante, los módulos de mini PDP y los bloques impulsados por personalization como componentes de cliente. Los componentes de servidor colocan juntas las llamadas a una storefront-api, un servicio de búsqueda, el recommendation-engine y el CMS, y se benefician de la memoización de peticiones en la capa de caché. El Edge Rendering en Vercel Edge o Cloudflare Workers permite generar árboles RSC cerca del usuario. Combinado con el pensamiento de islands-architecture, RSC ofrece el modelo más limpio para reducir el first-party-JS manteniendo una interactividad rica donde importa.

Relacionado

Descubre Composable Headless Frontend · Performance and Core Web Vitals.