Componentes del Servidor

Los Componentes del Servidor de React le permiten escribir UI que puede ser renderizada y opcionalmente almacenada en caché en el servidor. En Next.js, el trabajo de renderizado se divide aún más por segmentos de ruta para habilitar el streaming y el renderizado parcial, y existen tres estrategias diferentes de renderizado en el servidor:

• Renderizado estático
• Renderizado dinámico
• Streaming

Esta página explicará cómo funcionan los Componentes del Servidor, cuándo podría usarlos y las diferentes estrategias de renderizado en el servidor.

Beneficios del Renderizado en el Servidor

Hay varios beneficios al realizar el trabajo de renderizado en el servidor, incluyendo:

• Obtención de datos: Los Componentes del Servidor le permiten mover la obtención de datos al servidor, más cerca de su fuente de datos. Esto puede mejorar el rendimiento al reducir el tiempo que lleva obtener los datos necesarios para el renderizado y la cantidad de solicitudes que el cliente necesita hacer.
• Seguridad: Los Componentes del Servidor le permiten mantener datos y lógica sensibles en el servidor, como tokens y claves de API, sin el riesgo de exponerlos al cliente.
• Caché: Al renderizar en el servidor, el resultado puede almacenarse en caché y reutilizarse en solicitudes posteriores y entre usuarios. Esto puede mejorar el rendimiento y reducir costos al disminuir la cantidad de renderizado y obtención de datos en cada solicitud.
• Tamaño de paquetes: Los Componentes del Servidor le permiten mantener dependencias grandes que antes afectarían el tamaño del paquete JavaScript del cliente en el servidor. Esto beneficia a usuarios con conexiones lentas o dispositivos menos potentes, ya que el cliente no tiene que descargar, analizar ni ejecutar JavaScript para los Componentes del Servidor.
• Carga inicial de la página y First Contentful Paint (FCP): En el servidor, podemos generar HTML para permitir a los usuarios ver la página inmediatamente, sin esperar a que el cliente descargue, analice y ejecute el JavaScript necesario para renderizar la página.
• Optimización para motores de búsqueda y capacidad de compartir en redes sociales: El HTML renderizado puede ser utilizado por bots de motores de búsqueda para indexar sus páginas y bots de redes sociales para generar vistas previas de tarjetas sociales para sus páginas.
• Streaming: Los Componentes del Servidor le permiten dividir el trabajo de renderizado en fragmentos y transmitirlos al cliente a medida que estén listos. Esto permite al usuario ver partes de la página antes sin tener que esperar a que toda la página se renderice en el servidor.

Uso de Componentes del Servidor en Next.js

Por defecto, Next.js utiliza Componentes del Servidor. Esto le permite implementar automáticamente el renderizado en el servidor sin configuración adicional, y puede optar por usar Componentes del Cliente cuando sea necesario, consulte Componentes del Cliente.

¿Cómo se renderizan los Componentes del Servidor?

En el servidor, Next.js utiliza las APIs de React para orquestar el renderizado. El trabajo de renderizado se divide en fragmentos: por segmentos de ruta individuales y Límites de Suspense.

Cada fragmento se renderiza en dos pasos:

1. React renderiza los Componentes del Servidor en un formato de datos especial llamado React Server Component Payload (RSC Payload).
2. Next.js utiliza el RSC Payload y las instrucciones JavaScript de los Componentes del Cliente para renderizar HTML en el servidor.

Luego, en el cliente:

1. El HTML se utiliza para mostrar inmediatamente una vista previa rápida no interactiva de la ruta - esto es solo para la carga inicial de la página.
2. El React Server Components Payload se utiliza para reconciliar los árboles de Componentes del Cliente y del Servidor, y actualizar el DOM.
3. Las instrucciones JavaScript se utilizan para hidratar los Componentes del Cliente y hacer que la aplicación sea interactiva.

¿Qué es el React Server Component Payload (RSC)?

El RSC Payload es una representación binaria compacta del árbol de Componentes del Servidor de React renderizado. Es utilizado por React en el cliente para actualizar el DOM del navegador. El RSC Payload contiene:

• El resultado renderizado de los Componentes del Servidor
• Marcadores de posición para dónde deben renderizarse los Componentes del Cliente y referencias a sus archivos JavaScript
• Cualquier prop pasado de un Componente del Servidor a un Componente del Cliente

Estrategias de Renderizado en el Servidor

Existen tres subconjuntos de renderizado en el servidor: Estático, Dinámico y Streaming.

Renderizado Estático (Predeterminado)

Con el Renderizado Estático, las rutas se renderizan en tiempo de compilación, o en segundo plano después de revalidación de datos. El resultado se almacena en caché y puede enviarse a una Red de Entrega de Contenidos (CDN). Esta optimización permite compartir el resultado del trabajo de renderizado entre usuarios y solicitudes del servidor.

El renderizado estático es útil cuando una ruta tiene datos que no están personalizados para el usuario y pueden conocerse en tiempo de compilación, como una publicación de blog estática o una página de producto.

Renderizado Dinámico

Con el Renderizado Dinámico, las rutas se renderizan para cada usuario en tiempo de solicitud.

El renderizado dinámico es útil cuando una ruta tiene datos personalizados para el usuario o información que solo puede conocerse en tiempo de solicitud, como cookies o los parámetros de búsqueda de la URL.

Rutas Dinámicas con Datos en Caché

En la mayoría de los sitios web, las rutas no son completamente estáticas o completamente dinámicas - es un espectro. Por ejemplo, puede tener una página de comercio electrónico que utiliza datos de productos en caché que se revalidan a intervalos, pero también tiene datos de clientes no almacenados en caché y personalizados.

En Next.js, puede tener rutas renderizadas dinámicamente que tengan tanto datos en caché como no almacenados en caché. Esto se debe a que el RSC Payload y los datos se almacenan en caché por separado. Esto le permite optar por el renderizado dinámico sin preocuparse por el impacto en el rendimiento de obtener todos los datos en tiempo de solicitud.

Aprenda más sobre la caché de ruta completa y Caché de Datos.

Cambio a Renderizado Dinámico

Durante el renderizado, si se descubre una función dinámica o una solicitud de datos no almacenados en caché, Next.js cambiará a renderizar dinámicamente toda la ruta. Esta tabla resume cómo las funciones dinámicas y el almacenamiento en caché de datos afectan si una ruta se renderiza estática o dinámicamente:

En la tabla anterior, para que una ruta sea completamente estática, todos los datos deben estar en caché. Sin embargo, puede tener una ruta renderizada dinámicamente que utilice tanto solicitudes de datos en caché como no almacenadas en caché.

Como desarrollador, no necesita elegir entre renderizado estático y dinámico, ya que Next.js elegirá automáticamente la mejor estrategia de renderizado para cada ruta según las características y APIs utilizadas. En su lugar, usted elige cuándo almacenar en caché o revalidar datos específicos, y puede optar por transmitir partes de su UI.

Funciones Dinámicas

Las funciones dinámicas dependen de información que solo puede conocerse en tiempo de solicitud, como las cookies de un usuario, los encabezados de solicitud actuales o los parámetros de búsqueda de la URL. En Next.js, estas funciones dinámicas son:

• cookies() y headers(): Usar estas en un Componente del Servidor optará toda la ruta por el renderizado dinámico en tiempo de solicitud.
• useSearchParams():
  • En Componentes del Cliente, omitirá el renderizado estático y en su lugar renderizará todos los Componentes del Cliente hasta el límite de Suspense padre más cercano en el cliente.
  • Recomendamos envolver el Componente del Cliente que usa useSearchParams() en un límite <Suspense/>. Esto permitirá que cualquier Componente del Cliente por encima se renderice estáticamente. Ejemplo.
• searchParams: Usar la prop Pages optará la página por el renderizado dinámico en tiempo de solicitud.

Usar cualquiera de estas funciones optará toda la ruta por el renderizado dinámico en tiempo de solicitud.

Streaming

El Streaming le permite renderizar UI progresivamente desde el servidor. El trabajo se divide en fragmentos y se transmite al cliente a medida que estén listos. Esto permite al usuario ver partes de la página inmediatamente, antes de que todo el contenido haya terminado de renderizarse.

El Streaming está integrado por defecto en el App Router de Next.js. Esto ayuda a mejorar tanto el rendimiento de carga inicial de la página como la UI que depende de obtenciones de datos más lentas que bloquearían el renderizado de toda la ruta. Por ejemplo, las reseñas en una página de producto.

Puede comenzar a transmitir segmentos de ruta usando loading.js y componentes de UI con React Suspense. Consulte la sección Loading UI y Streaming para más información.