Uso de React Server Components en Next.js: Cliente vs Servidor
Resumen
Next.js y sus componentes server-side representan un salto significativo hacia una web más eficiente y rápida. La implementación de React Server Components en Next.js ha abierto un abanico de posibilidades donde el rendimiento y la experiencia del usuario se ven potencialmente mejorados. Así, entender el funcionamiento de estos componentes y cómo diferenciarlos de los componentes tradicionales resulta fundamental para sacarles el máximo provecho. Profundicemos en el uso de los Server y Client Components dentro de Next.js y cómo pueden transformar el desarrollo de aplicaciones web.
¿Qué son los React server components?
Los React Server Components representan una evolución significativa en la forma en que se renderizan y sirven las aplicaciones de React. Estos componentes permiten enviar al cliente una estructura HTML sin JavaScript innecesario desde el servidor, lo que reduce considerablemente la carga y mejora el rendimiento.
¿Cómo diferenciar entre componentes de servidor y de cliente?
En el ecosistema de Next.js, es crucial aprender a distinguir entre componentes de servidor y de cliente:
Componentes de servidor: Son generalmente presentacionales y no manejan estados o dinamismo excesivo. Se envían desde el servidor y son ideales para mostrar contenido estático.
Componentes de cliente: Están diseñados para ser dinámicos y manejar estados o efectos. Requieren JavaScript y son necesarios para acciones interactivas o para acceder a APIs del navegador.
¿Cuándo usar la notación de useClient?
La notación useClient transforma un componente server-side en un client component. Este es un cambio significativo ya que al utilizar esta anotación:
Todos los componentes anidados automáticamente se convierten en componentes de cliente.
Se pueden implementar funcionalidades que requieran uso de APIs de navegador o manejo de estado.
Organización de componentes en Next.js
Estructurar adecuadamente los componentes es clave para mantener un proyecto claro y manejable. Por ejemplo:
Separar componentes lógicos en directorios correspondientes.
Utilizar componentes proxy para exportaciones limpias y directas.
Importar componentes de manera organizada para mantener el código eficiente y legible.
Consejos para utilizar componentes de servidor y de cliente
Reserve componentes de servidor para elementos presentacionales que no requieren interacción o estado.
Utilice componentes de cliente para elementos que necesitan interactividad, estado o acceso a APIs del navegador.
Importancia de la jerarquía en componentes
La jerarquía en los componentes de Next.js es fundamental:
Comience con componentes de servidor en lo alto de la jerarquía.
Convierta a componentes de cliente solo aquellos necesarios y en el último nivel posible para no sacrificar el rendimiento.
Al comprender y aplicar correctamente los React Server Components, los desarrolladores pueden optimizar considerablemente el rendimiento de sus aplicaciones web, ofreciendo una experiencia de usuario más ágil y satisfactoria. En Next.js, estos componentes no solo mejoran la eficiencia, sino que representan una forma moderna y avanzada de construir y estructurar proyectos web. Continúa aprendiendo y experimentando con estas herramientas para elevar tus habilidades de desarrollo al siguiente nivel y crear aplicaciones web que destaquen por su rapidez y eficacia.
Muy buena explicación en general, pero el primer ejemplo de renderizar un server component dentro de un client component si funcionó, esto es porque el componente página (server) es pasado como children al layout (client) y next permite hacer esto. Lo que no permite es importar directamente un server component dentro de un client component.
En conclusión, se puede renderizar un server component dentro de un client component siempre que sea pasado como prop al client component.
Fuente:
Gracias por compartir!
Tenía la misma duda, gracias por la explicación.
CLASE8 02/03/2024 RENDERING - SERVER Y CLIENT COMPONENTS
Para entender plenamente este tema debemos estar familiarizados con estos tres conceptos:
Enviroments
El codigo puede ser ejecutado tanto en el lado del server y cliente.
!renders
Por cliente se refiere: lo que el navegador solicita a traves del dispositivo del usuario y el server responde con una interface de usuario.
Por server: a la PC que almacena nuestro codigo de la aplicacion, la pc recibe una solicitud desde el cliente y este envía una respuesta.
Request-Response Lifecycle
Inicia cuando un usuario visita o interactua con la aplicación.
En resumen el usuario interactura con la app, el cliente envía solicitudes http, llegan al server, este las procesa y reponde con recursos de HTML, CSS, JS, etc, esto se renderiza al cliente.
Network Boundary
separa el codigo de server y del cliente.
Con las convenciones "use client" y "use server" podemos definir nuestras fronteras.
Si necesitas acceder al servidor desde el cliente, envías una nueva petición al servidor en lugar de reutilizar la misma petición. Esto facilita la comprensión de dónde renderizar sus componentes y dónde colocar el Límite de Red.
SERVER COMPONENTS
Por defecto Next usa Server Components.
los react server components permiten escribir UI que puede ser renderizado y cacheado en el servidor.
Existen 3 estrategias de server rendering:
Los beneficios pueden ser:
- Data Fetching:al tener tu codigo viviendo dentro del server y a lado de un posible data store, esto hace que se reduzcan los tiempos del fetch para realizar el renderizado.
- Seguridad: Mantiene los datos y la logica del server seguros, evitando exponerlos al cliente.
- Cacheo: luego del renderizado, esta informacion se puede guardar y ser utilizada posteriormente.
- Bundles Sizes: podemos tener dependencias "precargadas" lista, evitando que el cliente use mas data de los necesario.
- Carga de la pagina inicial: El server genera html que permite al usuario visualizar la pagina inmediatamente.
- SEO y SNS: ayuda a los bots generar visualizaciones de la pagina.
- Streaming: facilita la visualizacion de pequeños bloques de la pagina, hasta que se carge toda.
Static Rendering
-Las rutas son renderizadas en build time, los resultados pueden ser cacheados y empujados a un CDN.-Es util cuando una ruta tiene data que no es personalizada para el usuario, como un blog o pagina de producto.
Dynamic Rendering
-Las rutas son renderizadas por cada usuario en cada request.-Es util cuando una ruta tiene data que si es personalizada hacia el usuario, como cookies o searchParams.-El uso de las funciones de cookies(),headers() y searchParams hacen que sea automaticamente un render dinámico en toda la ruta.
Streaming
-Habilita que progresivamente veamos UI desde el servidor, diviendolo en pequeños trozos y enviandolo por diferentes canales o "stream/buffers"-El streaming está integrado por defecto en Next.jsAppRouter.Esto ayuda a mejorar tanto el rendimiento inicial de carga de la página,así como la interfaz de usuario que depende de la obtención de datos más lentos que bloquearían la representación de toda la ruta.Por ejemplo, las reseñas en una página de producto.-Para empezar a usar streaming route segments se puede utilizar Loading.tsx
CLIENT COMPONENTS
Permite escribir UI interactivos que pueden ser renderizados en el lado del cliente al momento de la solicitud.
¿Cuando usarlos?
- Cuando se usen hooks com useState, effects y event listeners.
- Cuando se requiera usar Browser API.
Se puede usarlo colocando la directiva de "use client" en el archivo deseado, lo que convertida a todos los archivos que se deriven en el como client components.
COMPOSICION DE PATRONES
Gracias Xavier, esto me ayudo a entender cuando vi la imagen comparativa el por que los componentes que solo muestran informacion es mas recomendable renderizarlos del lado del servidor
es muy confuso al comienzo, pero de poco se va entendiendo, en clases posteriores veremos el render server component vs render client component, en cual terminaras de aterrizar tus ideas de estas definiciones.
Me estaba dando un error al ubicar el Header fuera del body en el RootLayout, al colocarlo por debajo de body se soluciono, por si les pasa.
quise decir dentro de body
Si funciono, gracias
Al 2/04/2024 el <Header /> lo tuve que poner dentro del body sobre {children} para que no me de errores.
En desarrollo React ejecuta un proceso llamado strict mode, en donde hace una doble renderizacion de componentes. Lo que puede dar la impresion que algunos metodos como console.log se ejecutan dos veces.
Pero esto ocurre solo en modo desarrollo, cuando se hace el build y se ejecuta en el servidor (o en local npm run build && npm run dev) no activa esa doble ejecucion.
:)
Al utilizar redux tool kit debo poner el provedor en root layout pero para ponerlo ahí necesito colocar 'use client' por lo tanto se perdería el server side rendering de toda mi aplicación, qué debería hacer en este caso?
Al usar Redux Toolkit en un proyecto de Next.js con Server Components, una estrategia es colocar el Provider en un componente que esté anidado dentro de un Client Component. Puedes crear un Client Component solo para el Provider y mantener el resto de tu aplicación como Server Components. Así, preservas el Server Side Rendering y solo el contexto necesario de Redux se renderiza del lado del cliente. Esto optimiza el rendimiento y permite seguir aprovechando las ventajas del server-side rendering en tu aplicación.
Para decidir cuándo usar un componente de tipo servidor y uno de tipo cliente en Next.js, considera lo siguiente:
Componentes de tipo servidor: Utiliza estos para componentes presentacionales que solo muestran información sin estado. Son ideales para mejorar el rendimiento, ya que no requieren JavaScript adicional. Ejemplos incluyen encabezados o listas estáticas.
Componentes de tipo cliente: Deben usarse para componentes dinámicos que manejan estados, efectos o requieren APIs del navegador, como formularios interactivos o animaciones. Usa use client para especificar que un componente debe ser tratado como cliente.
Prioriza los tipos de servidor cuando sea posible para optimizar el rendimiento.
Actualmente los logs del server son reenviados al cliente con el prefijo "server".
Por lo tanto van a poder ver el log sin usar el 'use client'.
(Eso es lo que pude sacar en conclusión ya que me dio curiosidad el por que veía el mensaje en consola ddel navegador sin usar el 'use client')
¿Tengo una duda, si quiero crear un contexto global que almacene por ejemplo la información del usuario autenticado, a ese contexto envolver toda mi app la misma se volvería de tipo cliente?
El uso de contextos para manejar estado global, como Redux o un Context, requiere un provider que pase el estado, forzando el uso de un cliente y afectando el performance. Sustant crea una tienda como un hook, sin afectar componentes de tipo servidor y aplicando estado global solo a componentes cliente.
No entendí bien lo del archivo de caché, para qué se usa?
Los archivos proxy en programación se utilizan para simplificar las importaciones y mejorar la organización del código. En lugar de importar múltiples módulos directamente en cada archivo, se crea un archivo proxy que agrupa estas importaciones en un solo lugar.
Ejemplo:
Imagina que tienes tres componentes: Header, Footer y Main. En lugar de importar cada uno en tu archivo principal, puedes crear un archivo index.ts en una carpeta components:
Luego, en tu archivo principal, simplemente importas desde components:
import{Header,Footer,Main}from'./components';
Esto hace que tu código sea más limpio y fácil de mantener.
La desventaja que veo de la atomicidad de Nextjs es que genera una cantidad grande de componentes y por ende de archivos y en proyectos grandes se vuelve tedioso.
Mejor tener esos "problemas" del lado del codigo (te intuye a ser mas organizado con tu code), a que el cliente posea problemas de rendimiento, lo que se traduce a perdida de visitas, posibles caidas en el proceso de compra, entre otros problemas. La ventaja mas grande es el rendimimento que le das a tus app mediante Next
Yo tengo el siguiente principio para escoger entre server y client components
Todos los componentes son del lado del servidor excepto los que requieran interacción, consumir una API del navegador, animaciones o ese tipo de cosas
Algo que he aprendido al optimizar apps con caché en servidor (backend), es que cuando un componente usa datos directos del usuario, es mejor dejarlo como 'client component'. Esos requests siempre tardan más (van hasta el origin y no pueden cacheados en masa). Para el resto, caché a tope. 🚀
esta es de las cosas más importantes y comunes al desarrollar con next!
Actulamente, Junio de 2026, los console.log aparecen en ambos lugares, tanto en la terminal con Node.js como el la consola del navegador:
¿Por qué aparece en el navegador un console.log de un RSC?
En versiones recientes de Next.js, durante el modo de desarrollo (next dev), el framework captura automáticamente las salidas de la consola que ocurren en el servidor y las "teletransporta" al navegador a través de una conexión de Hot Module Replacement (HMR).
Identificación: Si el log está precedido por la etiqueta "Server". Esto es una marca visual que añade Next.js para confirmarte que ese log no ocurrió en el cliente, sino que fue capturado en el servidor y reenviado para que no tengas que estar alternando constantemente entre la ventana del navegador y tu terminal de comandos.
Script de apoyo: También se aprecia que el log proviene de un archivo llamado forward-logs-shared.ts. Este es el script interno de Next.js encargado de recibir esos mensajes del servidor y mostrarlos ordenadamente en tu consola web.
Alguien sabe que fuente está utilizando el profe en su vscode?
Cuando un componente se vuelve un componente cliente en Next.js, todos los componentes que estén anidados dentro de él también se consideran de tipo cliente. Esto significa que el rendimiento puede verse afectado, ya que los componentes cliente requieren JavaScript para funcionar, lo que puede aumentar el tamaño de la carga útil. Además, ciertas características y APIs de Next.js, como la metadata, no estarán disponibles en estos componentes. Es recomendable utilizar componentes de servidor para partes que solo son presentacionales, manteniendo los componentes cliente para aquellos que requieren interacción y estado.
Los dos tipos de componentes en Next.js son:
React Server Components: Son componentes que se renderizan en el servidor y envían HTML directamente al cliente, sin incluir JavaScript innecesario. Son ideales para maquetación y mostrar información estática, mejorando el rendimiento.
Client Components: Se identifican con la notación use client. Estos componentes son dinámicos, requieren JavaScript y son adecuados para interacciones que necesitan estados o efectos, como animaciones o acceso a APIs del navegador.
Ambos tipos permiten optimizar el rendimiento de tu aplicación si se utilizan adecuadamente.
