Una guía completa para el renderizado del lado del servidor en React

La renderización del lado del servidor en React es una herramienta poderosa para crear aplicaciones web dinámicas. Permite a los desarrolladores crear interfaces de usuario interactivas de alto rendimiento sin depender de la ejecución de JavaScript del lado del cliente. Al utilizar componentes renderizados del lado del servidor en el código base de nuestra aplicación, podemos aprovechar tecnologías modernas como Node.js, lanzado en mayo de 2009 , que proporciona una forma simplificada de entregar contenido back-end directamente en nuestro código base front-end.

Este enfoque acelera los tiempos de carga y nos brinda un control sin precedentes sobre lo que se muestra en cada solicitud de página, al mismo tiempo que nos brinda características como la administración del estado que son naturales cuando usamos una biblioteca como React.

Este artículo explorará los beneficios de usar la renderización del lado del servidor en React, cómo funciona detrás de escena y cuál es la mejor manera de implementarla en proyectos existentes. También veremos algunos de los desafíos asociados con la renderización del lado del servidor, como la optimización del rendimiento y las consideraciones de mantenimiento. Finalmente, brindaremos consejos y trucos útiles para comenzar hoy con el renderizado del lado del servidor en React.

¿Qué es el renderizado del lado del servidor?

Server Side Rendering (SSR) se utiliza para representar páginas web en el servidor antes de enviarlas al cliente. Esto permite cargas de páginas más rápidas, mejor rendimiento y una solución de renderizado optimizada para SEO para aplicaciones React. Además, SSR puede brindar una mejor experiencia a los usuarios con conexiones a Internet más lentas o dispositivos con memoria y potencia de procesamiento limitadas al realizar la representación inicial de los componentes en el servidor.

SSR en React puede mejorar el tiempo de carga de la página al eliminar viajes de ida y vuelta innecesarios entre el cliente y el servidor. La representación del lado del servidor en React le brinda más control sobre cómo aparece el contenido en las páginas de resultados de los motores de búsqueda (SERP). Debido a que los rastreadores de los motores de búsqueda dependen en gran medida de JavaScript para indexar sitios web, es posible que los sitios web creados completamente con representación del lado del cliente no aparezcan correctamente en las SERP debido a la incapacidad de analizar el código JavaScript.

La representación del lado del servidor, en comparación con la representación del lado del cliente, ayuda a garantizar la coherencia entre diferentes navegadores; Dado que gran parte del desarrollo web moderno depende en gran medida de funciones específicas del navegador, como API o controladores de eventos personalizados, es posible que este tipo de funciones no siempre se comporten correctamente cuando se procesan únicamente a través de técnicas del lado del cliente, pero funcionarán normalmente si se procesan previamente a través del servidor. métodos secundarios de antemano.

Las principales ventajas y desventajas del renderizado del lado del servidor con React son las siguientes:

Implementación de renderizado del lado del servidor en React

Profundicemos ahora un poco más en cómo funciona la renderización del lado del servidor en Next.js y Express.js, explorando un caso de uso en el que puede resultar particularmente útil.

Caso de uso: un sitio web de comercio electrónico

Consideremos un caso de uso en el que la renderización del lado del servidor puede resultar particularmente útil.

Un sitio web de comercio electrónico suele tener muchas páginas. Cada página muestra un producto o categoría de producto. Además, estas páginas tienden a ser dinámicas y actualizarse con frecuencia, por lo que es importante asegurarse de que sean fácilmente descubiertas por los motores de búsqueda y accesibles para todos los usuarios.

Para lograr esto, puede crear su sitio web de comercio electrónico con representación del lado del servidor en Next.js o Express.js. Este enfoque permitiría generar marcado HTML para cada página del servidor. De este modo, se facilita a los motores de búsqueda el rastreo e indexación del contenido.

Implementación de renderizado del lado del servidor usando Next.js

Veamos ahora cómo podemos implementar la representación del lado del servidor en Next.js para un sitio web de comercio electrónico.

Paso 1: crea un nuevo proyecto Next.js

Para comenzar, deberá crear un nuevo proyecto Next.js ejecutando los siguientes comandos en su terminal:

npx crear-siguiente-aplicación mi-aplicación-de-comercio electrónico
 cd mi-aplicación-ecommerce

Paso 2: agregue las dependencias requeridas

A continuación, deberá agregar las siguientes dependencias a su proyecto:

 npm instala reaccionar reaccionar-dom siguiente

Así es como se ve package.json ahora.

 {
 "nombre": "mi-aplicación-de-comercio-e",
 "versión": "0.1.0",
 "privado": verdadero,
 "guiones": {
 "dev": "próximo desarrollador",
 "compilación": "próxima compilación",
 "inicio": "próximo inicio",
 "pelusa": "siguiente pelusa"
 },
 "dependencias": {
 "@siguiente/fuente": "13.1.6",
 "eslint": "8.34.0",
 "eslint-config-next": "13.1.6",
 "siguiente": "13.1.6",
 "reaccionar": "18.2.0",
 "reaccionar-dom": "18.2.0"
 }
 }

Tenga en cuenta las versiones de los paquetes mencionados anteriormente tal como se utilizaron cuando se creó esta guía.

Paso 3: configurar la configuración del entorno

Ahora definiremos una variable de entorno que se almacenará en un archivo .env.local, que almacena los ajustes de configuración que se pueden usar en diferentes entornos (por ejemplo, desarrollo, pruebas, producción).

Para establecer una variable de entorno en su proyecto. Tendrás que crear un archivo llamado .env.local en la raíz del directorio de tu proyecto y agregar una línea como la siguiente:

 API_URL=

Es importante tener en cuenta que no debe registrar este archivo en el control de código fuente, ya que puede contener información confidencial, como credenciales de bases de datos o claves API.

En su lugar, puede crear un archivo de plantilla llamado .env.example que contenga valores de marcador de posición para sus variables de entorno y registrar ese archivo en el control de código fuente. Luego, otros desarrolladores pueden copiar este archivo y completar los valores de las variables de entorno.

Paso 4: crea una nueva página

Next.js utiliza un sistema de enrutamiento basado en archivos, lo que significa que un archivo en el directorio de páginas representa cada página de su aplicación. Para crear una nueva página, simplemente cree un nuevo archivo en el directorio de la página con la ruta URL deseada. Por ejemplo, para crear una página que muestre una lista de productos, puede crear un archivo llamado páginas/productos/index.js.

En este archivo, puede definir un componente de React que se representará cuando el usuario visite la ruta URL /products. A continuación se muestra un ejemplo de un componente que obtiene una lista de productos de una API y los muestra en una lista:

 función Página de productos {
 const (productos, setProducts) = useState( )

 utilizarEfecto( => {
  función asíncrona buscarProductos {
   const res = await fetch('/api/productos')
   productos constantes = esperar res.json
   establecerProductos(productos)
  }
  buscarProductos
 }, )

 devolver (
  <div>
   <h1>Productos</h1>
   <ul> 
{productos.map((producto) => (
 <li clave={producto.id}>{producto.nombre}</li>
 ))}
 </ul>
 </div>
 )
 }

 exportar página de productos predeterminada

Paso 5: crear un punto final API

Para obtener la lista de productos, utilizamos un punto final API en /api/products. Next.js proporciona un sistema de enrutamiento API integrado que facilita la creación de puntos finales API sin servidor.

Para crear un punto final API, cree un nuevo archivo en el directorio páginas/api. Por ejemplo, para crear un punto final API que devuelva una lista de productos, puede crear un archivo llamado páginas/api/products.js.

En este archivo puede definir una función que se ejecutará cuando el usuario solicite el punto final de la API. Para los fines de esta guía, usaremos una función de ejemplo que recupera una lista de productos de una API simulada:

 productos const = ({ id: 1, nombre: 'Producto 1' }, { id: 2, nombre: 'Producto 2' }, { id: 3, nombre: 'Producto 3' },)

 exportar controlador de función predeterminado (req, res) { 
res.status(200).json(productos)
 }

Paso 6: actualice la página para utilizar la representación del lado del servidor

De forma predeterminada, Next.js utiliza la representación del lado del cliente (CSR) para representar páginas, lo que significa que el código JavaScript se ejecuta en el navegador del usuario. Para cambiar a la representación del lado del servidor (SSR), deberá actualizar el componente de la página para usar una función getServerSideProps.

La función getServerSideProps es una función especial que se ejecuta en el servidor antes de que se represente la página. Se puede utilizar para recuperar datos de una API o base de datos y devolverlos como accesorios al componente de la página.

Aquí hay una versión actualizada del archivo pages/products/index.js que usa getServerSideProps para recuperar la lista de productos del servidor:

 importar {useState} desde 'reaccionar'

 función Página de Productos({ productos }) {
 const (cargando, setLoading) = useState(falso)

 devolver (
  <div>
   <h1>Productos</h1>
   <ul> 
{productos.map((producto) => (
 <li clave={producto.id}>{producto.nombre}</li>
 ))}
 </ul>
 </div>
 )
 }

 exportar función asíncrona getServerSideProps {
 const res = await fetch(`${process.env.API_URL}/api/products`)
 productos constantes = esperar res.json
 devolver { accesorios: { productos } }
 }

 exportar página de productos predeterminada

Tenga en cuenta que sacamos el enlace useState para el estado de carga de la función getServerSideProps, ya que también debe inicializarse en el cliente.

Paso 7: inicie el servidor de desarrollo

Ahora puede iniciar el servidor de desarrollo ejecutando el siguiente comando en su terminal:

 npm ejecutar desarrollador

Esto iniciará un servidor de desarrollo local en .

Paso 8: prueba la aplicación

Ahora puede probar la aplicación visitando la ruta URL /products en su navegador. Debería ver una lista de productos mostrados en la página.

Si ve el código fuente de la página en su navegador, también verá que la lista de productos está incluida en el marcado HTML, lo que significa que la página se representó en el servidor.

¡Felicitaciones, ahora sabe cómo implementar la representación del lado del servidor en una aplicación Next.js!

Implementación de renderizado del lado del servidor usando Express.js

Veamos ahora cómo podemos implementar el mismo caso de uso en una aplicación Express.js:

Paso 1: cree una nueva aplicación Express.js

Para comenzar, deberá crear un nuevo directorio para su proyecto y ejecutar el siguiente comando en su terminal:

 inicio npm

Ahora puede ver un archivo package.json en el directorio de su proyecto.

Luego instale Express.js y las dependencias necesarias ejecutando el siguiente comando:

 npm instalar express reaccionar reaccionar-dom siguiente

Así es como se ve package.json ahora.

 {
 "nombre": "demostración-exprés",
 "versión": "1.0.0",
 "descripción": "",
 "principal": "index.js",
 "guiones": { 
"prueba": "echo \"Error: no se ha especificado ninguna prueba\" && salida 1"
 },
 "autor": "",
 "licencia": "ISC",
 "dependencias": {
 "expreso": "^4.18.2",
 "siguiente": "^13.1.6",
 "reaccionar": "^18.2.0",
 "reaccionar-dom": "^18.2.0"
 }
 }

Tenga en cuenta las versiones de los paquetes mencionados anteriormente tal como se utilizaron cuando se creó esta guía.

Paso 2: configurar la configuración del entorno

Ahora definiremos una variable de entorno que se almacenará en un archivo .env.local, que almacena los ajustes de configuración que se pueden usar en diferentes entornos (por ejemplo, desarrollo, pruebas, producción).

Para establecer una variable de entorno en su proyecto. Tendrás que crear un archivo llamado .env.local en la raíz del directorio de tu proyecto y agregar una línea como la siguiente:

 API_URL=

Es importante tener en cuenta que no debe registrar este archivo en el control de código fuente, ya que puede contener información confidencial, como credenciales de bases de datos o claves API.

En su lugar, puede crear un archivo de plantilla llamado .env.example que contenga valores de marcador de posición para sus variables de entorno y registrar ese archivo en el control de código fuente. Luego, otros desarrolladores pueden copiar este archivo y completar los valores de las variables de entorno.

Paso 3: configurar el servidor

Ahora cree un nuevo archivo llamado server.js en la raíz del directorio de su proyecto y agregue el siguiente código:

 const expresar = requerir('expresar')
 const siguiente = requerir('siguiente')

 const dev = proceso.env.NODE_ENV! == 'producción'
 aplicación constante = siguiente ({dev})
 mango constante = app.getRequestHandler

 aplicación.preparar .entonces( => {
 servidor constante = expreso

 servidor.get(" (solicitud, res) => {
  devolver app.render(req, res, '/home')
 })

 servidor.get(" (solicitud, res) => {
  devolver aplicación.render(req, res, "
 })


 servidor.all('*', (req, res) => {
  identificador de retorno (req, res)
 })

 servidor.listen(3000, (err) => {
  si (err) tirar errar
  console.log('> Listo el ')
 })
 })

Este código configura un servidor Express.js que escucha las solicitudes entrantes en el puerto 3000. El objeto de la aplicación es una instancia de la aplicación Next.js, que utilizamos para representar páginas en respuesta a las solicitudes.

En este ejemplo, configuramos dos rutas: / y /products. Cuando llega una solicitud para cualquiera de estas rutas, el servidor llama a app.render para representar la página correspondiente. Si la ruta solicitada no coincide con ninguna de ellas, el servidor recurre a la función de manejo, que sirve la página apropiada mediante la representación del lado del cliente.

Paso 4: crea la página de inicio

Cree un nuevo archivo llamado páginas/home.js en un directorio llamado páginas en la raíz del directorio de su proyecto y agregue el siguiente código:

 importar enlace desde 'siguiente/enlace'

 función Página de inicio {
 devolver (
  <div>
   <h1>¡Bienvenido a nuestro sitio web de comercio electrónico!</h1>
   <Enlace href="
    <a>Ver nuestros productos</a>
   </Enlace>
  </div>
 )
 }
 
exportar la página de inicio predeterminada

Este código define una página de inicio simple que muestra un mensaje de bienvenida y un enlace para ver la página de productos.

Paso 5: crea la página de productos

Cree un nuevo archivo llamado páginas/products.js en el directorio de páginas y agregue el siguiente código:

 importar {useEffect, useState} desde 'reaccionar';

 función Página de productos {
 const (productos, setProducts) = useState( );

 utilizarEfecto( => {
 función asíncrona buscarProductos {
  respuesta constante = await fetch('/api/products');
  datos constantes = espera respuesta.json;
  setProducts(datos.productos);
 }

 buscarProductos;
 }, );

 devolver (
 <div>
  <h1>Productos</h1>
  <ul>
   {productos.mapa(producto => (
    <li clave={producto.id}>{producto.nombre}</li>
   ))}
  </ul>
 </div>
 );
 }

 exportar la página de productos predeterminada;

Este código define una página de productos que muestra una lista de productos obtenidos de un punto final API. El gancho useEffect se utiliza para administrar el estado y recuperar datos del servidor. Cuando se monta el componente, el gancho useEffect llama a la función fetchProducts para recuperar los productos de la API.

Paso 6: crear el punto final de API

Ahora deberá agregar un punto final API para productos en el archivo server.js presente en la raíz del directorio de su proyecto y agregar el siguiente código:

  servidor.get('/api/productos', (req, res) => {
  productos constantes = (
   {id: 1, nombre: 'Producto 1' },
   {id: 2, nombre: 'Producto 2' },
   {id: 3, nombre: 'Producto 3' },
  );

  res.status(200).json({ productos });
 });

Este código define un punto final API que devuelve una lista de productos. Este punto final recuperaría datos de una base de datos u otra fuente de datos en un escenario del mundo real.

El server.js actualizado debería verse así:

 const expresar = requerir('expresar') 
const siguiente = requerir('siguiente')

 const dev = proceso.env.NODE_ENV! == 'producción'
 aplicación constante = siguiente ({dev})
 mango constante = app.getRequestHandler

 aplicación.preparar .entonces( => {
 servidor constante = expreso

 servidor.get(" (solicitud, res) => {
 devolver app.render(req, res, '/home')
 })

 servidor.get(" (solicitud, res) => {
 devolver aplicación.render(req, res, "
 })

 servidor.get('/api/productos', (req, res) => {
 productos constantes = (
 {id: 1, nombre: 'Producto 1' },
 {id: 2, nombre: 'Producto 2' },
 {id: 3, nombre: 'Producto 3' },
 );

 res.status(200).json({ productos });
 });


 servidor.all('*', (req, res) => {
 identificador de retorno (req, res)
 })

 servidor.listen(3000, (err) => {
 si (err) tirar errar
 console.log('> Listo el ')
 })
 })

Paso 7: inicie el servidor

Inicie el servidor Express.js ejecutando el siguiente comando en su terminal:

servidor de nodo.js

Esto iniciará el servidor y lo hará disponible en formato .

Cuando navega a /, debería ver la página de inicio con un enlace a la página de productos.

Al hacer clic en el enlace, accederá a la página de productos, donde se muestra una lista de productos obtenidos del punto final API.

¡Felicitaciones, ahora sabe cómo implementar la representación del lado del servidor en una aplicación Next.js y Express.js!

Representación del lado del servidor: SEO versus rendimiento

La representación del lado del servidor (SSR) puede aportar beneficios de rendimiento y SEO, pero puede haber compensaciones.

Beneficios de SEO

• SSR mejora el SEO al facilitar a los motores de búsqueda el rastreo e indexación de contenido.
• SSR envía HTML completamente renderizado al cliente, lo que hace que el contenido sea más fácil de entender para los motores de búsqueda.
• Los motores de búsqueda pueden clasificar las páginas SSR más alto porque brindan una mejor experiencia de usuario.
• SSR puede ayudar a garantizar que todo el contenido de la página sea visible para los motores de búsqueda, incluido el contenido generado por JavaScript.

Beneficios de rendimiento

• CSR puede proporcionar tiempos de carga de página inicial más rápidos porque el navegador puede comenzar a representar la página tan pronto como recibe los archivos HTML y JavaScript iniciales.
• SSR puede ser más lento para las cargas iniciales de la página porque el servidor necesita representar HTML, CSS y JavaScript antes de enviarlo al cliente.
• Una vez que se carga la página, la navegación posterior del sitio web puede ser más rápida porque el servidor ya ha realizado el trabajo de renderizado.
• SSR puede reducir el procesamiento del lado del cliente, lo que beneficiaría a los dispositivos más lentos.
• SSR puede ayudar a reducir la cantidad de solicitudes de red necesarias para cargar una página, mejorando el rendimiento.

Compensaciones

• La compensación entre SEO y rendimiento puede no ser significativa para algunos sitios.
• Para sitios complejos con mucho contenido dinámico, el impacto en el rendimiento de SSR puede superar los beneficios del SEO.
• La RSS puede ser más difícil de implementar y mantener que la RSC, lo que aumenta los costos de desarrollo.

Pensamientos finales

En conclusión, la renderización del lado del servidor en React ofrece una solución poderosa para crear aplicaciones web dinámicas y de alto rendimiento. Podemos optimizar las velocidades de carga de las páginas, brindar una mejor experiencia a los usuarios con dispositivos más lentos o potencia de procesamiento limitada y mantener la coherencia en todos los navegadores al representar páginas web en el servidor antes de entregarlas al cliente.

Si bien algunos desafíos están asociados con la representación del lado del servidor, como una mayor complejidad y consideraciones de mantenimiento, las tecnologías modernas como Next.js y Express.js han facilitado la implementación y optimización. Con estrategias de almacenamiento en caché y soporte de infraestructura adecuado, la representación del lado del servidor puede mejorar en gran medida la experiencia general del usuario y proporcionar una solución más compatible con SEO para sitios web complejos, como las plataformas de comercio electrónico.

En general, la renderización del lado del servidor debe considerarse una herramienta valiosa en el conjunto de herramientas del desarrollador de React, especialmente para proyectos con grandes cantidades de contenido dinámico o lógica de backend pesada. Puede proporcionar beneficios considerables en rendimiento, experiencia de usuario y optimización de motores de búsqueda si se cuida el diseño y la implementación adecuados.

A medida que React continúa ganando popularidad, es crucial contar con desarrolladores capacitados y experimentados para darle vida a sus proyectos. Es posible que desee consultar esto para comprender cómo contratar a un desarrollador de React que pueda brindarle soluciones de alta calidad adaptadas a sus necesidades.

Preguntas frecuentes (FAQ)

¿El renderizado del lado del servidor de React es más rápido?

La renderización del lado del servidor de React puede ser más rápida que la renderización del lado del cliente en ciertos escenarios. Por ejemplo, si su aplicación tiene una gran cantidad de contenido o datos que deben cargarse antes de representar la página, SSR puede proporcionar un tiempo de carga inicial más rápido que CSR. Sin embargo, en los casos en los que la mayor parte del contenido se genera dinámicamente mediante JavaScript, la CSR puede ser más rápida.

¿Vale la pena la RSS?

Si SSR vale la pena o no, depende de las necesidades y requisitos específicos de su aplicación. SSR puede proporcionar beneficios como tiempos de carga iniciales mejorados, mejor SEO y rendimiento mejorado en dispositivos de gama baja o conexiones de red lentas. Sin embargo, implementar SSR también puede agregar complejidad a su aplicación y puede que no sea necesario para todos los casos de uso.

¿Es Facebook una RSE o una RSS?

Facebook utiliza una combinación de CSR y SSR en sus aplicaciones. Utilizan SSR para la carga inicial de algunas de sus páginas, como las noticias, pero dependen en gran medida de CSR para actualizaciones e interacciones dinámicas.

¿Cuándo debo utilizar SSR?

SSR puede resultar útil en varios escenarios, incluso cuando tiene una gran cantidad de datos o contenido para cargar, para mejorar el SEO o para mejorar el rendimiento en conexiones de red lentas. SSR también puede ser útil para aplicaciones que requieren un alto nivel de accesibilidad o para aplicaciones que deben representarse en dispositivos de gama baja. Sin embargo, SSR puede agregar complejidad y gastos generales a su aplicación, por lo que es importante considerar cuidadosamente las ventajas y desventajas antes de decidir usarlo.

Si te gustó este artículo sobre React, consulta estos temas;

• Reaccionar mejores prácticas
• Reaccionar bibliotecas de componentes de UI
• Los 6 mejores IDE y editores de React
• Reaccionar frente a Backbone JS
• ¿Por qué React es tan popular?
• Lo que necesitas saber sobre reaccionar
• Reaccionar WebSockets: Tutorial