Featured image of post React Server Components: El futuro del renderizado webFeatured image of post React Server Components: El futuro del renderizado web

React Server Components: El futuro del renderizado web

Explore React Server Components architecture, server vs client boundaries, streaming SSR, data fetching patterns, Suspense integration, and adoption strategy for existing projects.

React Server Components (RSC) representan un cambio de paradigma. Los componentes se ejecutan exclusivamente en el servidor, enviando cero JavaScript al cliente. A diferencia del SSR tradicional, RSC produce un formato serializado especial (payload RSC) que el reconcilidor de React en el cliente usa para reconstruir el árbol de componentes sin ejecutar el código.

Límites servidor/cliente

Las directivas “use client” y “use server” definen el límite. Componentes sin directiva son server components por defecto. Los server components no pueden usar estado, efectos o APIs del navegador.

Streaming SSR y Suspense

RSC permite streaming nativo. Cada límite Suspense puede transmitirse independientemente a medida que sus datos estén disponibles, mejorando TTFB y LCP.

Patrones de obtención de datos

Las consultas a la base de datos se colocan junto a los componentes que las usan, eliminando el problema de waterfall. React desduplica automáticamente solicitudes fetch() durante el renderizado.

Server Actions

Manejan formularios y mutaciones de datos sin construir rutas API. Soporte de mejora progresiva: el formulario funciona sin JavaScript.

Estrategia de adopción

Migración incremental desde Pages Router. Empieza con componentes de datos, identifica límites cliente, extrae islas interactivas, sube la obtención de datos a componentes servidor.