Tabla de contenidos
- Introducción
- Qué son los Componentes de Servidor
- Cuándo usar Componentes de Servidor
- Cuándo usar Componentes de Cliente
- Cómo puedo especificar que un componente es de cliente o servidor
- Beneficios de Componentes de Servidor
Introducción
Antes de empezar a explicar las diferencias entre componentes de servidor y de cliente hay que aclarar que los componentes de servidor no es una invención de Next.js sino que es una creación de React, la cual Next.js adoptó inmediatamente convirtiéndolos en el componente por defecto, siendo la razón principal la optimización y solo usar componentes del lado cliente cuando es necesario.
Sigue leyendo para entender porque.
Nota: iré intercalando los términos anglosajones porque a la hora de buscar información obtendrás más resultados con esos términos.
Qué son los Componentes de Servidor
No debemos confundir Server Side Rendering (Renderizado del Lado del Servidor) con Server Components (Componentes de Servidor).
Los Client Components (componentes de lado cliente) también son renderizados en el servidor en SSR (Server Side Rendering).
Básicamente con SSR tradicional el componente es renderizado en el servidor, el HTML y datos serializados para la carga inicial se envían al cliente (navegador) para luego pasar a la fase conocida como «hydration» (hidratación) donde se renderizan nuevamente y se carga todo el JavaScript necesario para interactuar con los componentes.
En definitiva, estamos enviando JS al navegador.
La diferencia con Server Components es que estos nunca abandonan el servidor, es decir, no hay código JS que se envía al navegador. Y por lo tanto, no pueden hacer uso de «hooks» como useRouter (hook de Next.js) ya que el router depende del objeto ‘window’, tampoco puede hacer uso de ‘state’ o ningún otro hook en React como useEffect, useState porque no son componentes que vuelven a renderizarse.
Un hook es un gancho en el ciclo de vida (lifecycle) de un componente React, pero un Server Component no tiene un ciclo de vida, solo usa los datos solicitados y envía el HTML final.
Cuándo usar Componentes de Servidor
Tal como Next.js los ha convertido en el componente por defecto, la respuesta es sencilla, siempre a menos que necesiten algún tipo de interactividad en el lado cliente, por ejemplo un formulario en el que necesitas gestionar el envío, validaciones, etc.
Cuándo usar Componentes de Cliente
Si necesitas usar hooks useEffect, useState, useReducer….
Si necesitas un class component (componente de clase), no funcionan con Server Components
Si necesitas DOM event listeners
Si utiliza APIs del navegador
Cómo puedo especificar que un componente es de cliente o servidor
Muy sencillo, cuando un componente debe ser un Client Component (del lado cliente) necesitamos añadir una directiva en la primera línea de nuestro componente «use client«
Beneficios de Componentes de Servidor
Los beneficios son varios y están muy bien explicados en este post en linkedin de Daine Mawer
Pongo aquí la versión traducida:
𝗧𝗶𝗲𝗺𝗽𝗼 𝗱𝗲 𝗖𝗮𝗿𝗴𝗮 𝗱𝗲 𝘂𝗻 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝗲 𝗱𝗲 𝗥𝗲𝗮𝗰𝘁𝗷𝘀 𝗦𝗲𝗿𝘃𝗲𝗿: Con RSC, el servidor renderiza los componentes antes de enviarlos al cliente, reduciendo el tiempo de carga inicial. Esto es crucial para proyectos grandes donde los tiempos de carga pueden ser una preocupación importante, especialmente al tratar con interfaces de usuario complejas.
𝗧𝗶𝗲𝗺𝗽𝗼 𝗱𝗲 𝗧𝗶𝗲𝗺𝗽𝗼 𝗮 𝗜𝗻𝘁𝗲𝗿𝗮𝗰𝘁𝗶𝘃𝗮 (𝗧𝗧𝗜): Al transferir el proceso de renderizado al servidor, RSC permite que el cliente reciba contenido pre-renderizado más rápido, lo que resulta en un TTI (Tiempo Hasta la Interactividad) más rápido. Esto mejora la experiencia del usuario, ya que la página se vuelve interactiva más rápidamente.
𝗢𝗽𝘁𝗶𝗺𝗶𝘇𝗮𝗰𝗶ó𝗻 𝗱𝗲 𝗮𝗻𝗰𝗵𝗼 𝘀𝗲𝗿𝘃𝗶𝗱𝗼: RSC optimiza el uso del ancho de banda al transferir contenido pre-renderizado en lugar de depender del JavaScript del lado del cliente para renderizar los componentes. Esto puede resultar en ahorros significativos de ancho de banda, especialmente para usuarios con conexiones lentas o planes de datos limitados.
𝗦𝗘𝗢 𝘆 𝗦𝗵𝗮𝗿𝗶𝗻𝗴 𝗱𝗲 𝗠𝗲𝘁𝗮𝗱𝗮 𝗜𝗺𝗽𝗿𝗼𝘃𝗶𝘀𝗮𝗱𝗮: Los rastreadores de motores de búsqueda y las plataformas de redes sociales pueden analizar rápidamente el contenido renderizado en el servidor, mejorando el SEO y asegurando que los enlaces compartidos se muestren correctamente con metadatos significativos.
𝗠𝗲𝗷𝗼𝗿𝗮 𝗥𝗲𝗻𝗱𝗶𝘆 𝗲𝗻 𝗠𝗼𝗯𝗶𝗹𝗲 𝘆 𝗦𝗵𝗮𝗿𝗶𝗻𝗴 𝗱𝗲 𝗠𝗲𝗱𝗶𝗮 𝗦𝗶𝗺𝗽𝗹𝗶𝗳𝗶𝗰𝗮𝗱𝗮: El renderizado en el lado del servidor reduce la carga de procesamiento en dispositivos móviles, lo que resulta en un rendimiento más suave y una mejor experiencia del usuario en dispositivos de gama baja o con recursos limitados.
𝗛𝗶𝗱𝗿𝗮𝘁𝗮𝗰𝗶ó𝗻 𝗺𝗮́𝘀 𝗲𝗳𝗶𝗰𝗶𝗲𝗻𝘁𝗲 𝗲𝗻 𝗲𝗹 𝗛𝘆𝗱𝗿𝗮𝘁𝗶𝗼𝗻 𝗱𝗲 𝗖𝗹𝗶𝗲𝗻𝘁𝗲: React hidrata los componentes una vez que el contenido inicial llega al cliente, haciéndolos completamente interactivos. Este proceso es menos intensivo en recursos que el renderizado tradicional del lado del cliente, mejorando aún más el rendimiento.
𝗦𝗲𝗴𝗺𝗲𝗻𝘁𝗮𝗰𝗶ó𝗻 𝗱𝗲 𝗖𝗼́𝗱𝗶𝗴𝗼 𝗘𝘀𝗽𝗹𝗶𝘁𝗮𝗱𝗼: RSC permite una partición eficiente del código en el lado del servidor, enviando solo los componentes necesarios y reduciendo el tamaño total del paquete. Esto beneficia tanto la carga inicial como las interacciones posteriores en la página.
𝗠𝗮𝗻𝗮𝗷𝗲𝗺𝗲𝗻𝘁𝗼 𝘀𝗶𝗺𝗽𝗹𝗶𝗳𝗶𝗰𝗮𝗱𝗼 𝗲𝗻 𝗮𝗱𝗼𝗽𝗰𝗶𝗼́𝗻: Dado que RSC admite la transferencia directa del estado generado en el servidor al cliente, simplifica la gestión del estado y elimina la necesidad de viajes adicionales al servidor para obtener datos.
𝗔𝗱𝗼𝗽𝗰𝗶𝗼́𝗻 𝗜𝗻𝗰𝗿𝗲𝗺𝗲𝗻𝘁𝗮𝗹: Los Componentes del Servidor React se pueden adoptar de manera incremental en proyectos existentes, lo que facilita que los equipos integren la tecnología gradualmente sin una revisión completa.
En general, los Componentes del Servidor React brindan una solución poderosa para mejorar el rendimiento en proyectos headless a gran escala, lo que resulta en una experiencia de usuario mejorada.
Espero que este artículo te pueda aclarar dudas o despierte curiosidad para saber más, si tienes alguna pregunta no dudes en contactar!