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.
• Almacenamiento en 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 realizados en cada solicitud.
• Rendimiento: Los Componentes del Servidor le brindan herramientas adicionales para optimizar el rendimiento desde la línea base. Por ejemplo, si comienza con una aplicación compuesta completamente por Componentes del Cliente, mover partes no interactivas de su UI a Componentes del Servidor puede reducir la cantidad de JavaScript necesario en el cliente. Esto es beneficioso para usuarios con conexiones a Internet más lentas o dispositivos menos potentes, ya que el navegador tiene menos JavaScript del lado del cliente que descargar, analizar y ejecutar.
• 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 por 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 de 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 de 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 renderizado de Componentes del Servidor de React. 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 deberían 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 Contenido (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 se pueden conocer en el momento de la 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 se puede conocer en el momento de la 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 tienen 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 el momento de la solicitud.

Obtenga más información 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 se puede conocer en el momento de la 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 hará que toda la ruta opte por el renderizado dinámico en el momento de la solicitud.
• searchParams: Usar la prop searchParams en una Página hará que la página opte por el renderizado dinámico en el momento de la solicitud.

Usar cualquiera de estas funciones hará que toda la ruta opte por el renderizado dinámico en el momento de la solicitud.

Streaming

El Streaming le permite renderizar progresivamente la UI desde el servidor. El trabajo se divide en fragmentos y se transmite al cliente a medida que esté listo. 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 Enrutador de Aplicaciones 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 UI de Carga y Streaming para obtener más información.