React Server Components representan el cambio mas significativo en la arquitectura de React desde la introduccion de hooks. No son simplemente renderizado en el servidor, son una nueva forma de pensar sobre donde vive tu logica.
El problema que resuelven
Antes de RSC, teniamos dos opciones: renderizar todo en el cliente (enviando mucho JavaScript) o usar SSR tradicional (que rehidrata todo el arbol). RSC introduce una tercera opcion: componentes que se ejecutan exclusivamente en el servidor y envian HTML puro al cliente, sin JavaScript asociado.
Esto significa que puedes tener un componente que accede directamente a tu base de datos, procesa datos pesados o usa dependencias grandes, sin que nada de eso afecte el bundle que recibe el usuario.
El modelo mental
Piensa en tu aplicacion como un arbol donde cada nodo puede ser un Server Component o un Client Component. Los Server Components son el valor predeterminado. Solo marcas con 'use client' los componentes que necesitan interactividad: click handlers, estado local, efectos del navegador.
Esta inversion del default es clave. En lugar de preguntarte que puedes mover al servidor, te preguntas que realmente necesita el cliente. La respuesta suele ser mucho menos de lo que piensas.
Patrones practicos
El patron mas comun es tener Server Components como contenedores que obtienen datos y Client Components como hojas interactivas. Por ejemplo, una pagina de producto donde el layout, los datos y las imagenes son Server Components, pero el boton de compra y el selector de tallas son Client Components.
Otro patron poderoso es el streaming: puedes enviar el shell de la pagina inmediatamente y hacer stream de los datos pesados a medida que estan disponibles, usando Suspense boundaries para mostrar estados de carga elegantes.
Errores comunes
El error mas frecuente es poner 'use client' demasiado arriba en el arbol, convirtiendo subarboles enteros en client-side innecesariamente. Otro error comun es intentar pasar funciones o clases como props desde Server a Client Components, lo cual no es posible porque los datos cruzan una frontera de serializacion.
RSC no es una optimizacion opcional, es el futuro de como construimos con React. Entender su modelo mental hoy te prepara para los proximos cinco anos de desarrollo web.