Representación del lado del servidor con React

¿Qué es el renderizado del lado del servidor? ¿Cómo se hace con React?

La representación del lado del servidor , también llamada SSR , es la capacidad de una aplicación JavaScript de renderizarse en el servidor en lugar de en el navegador.

¿Por qué querríamos hacerlo?

• Permite que su sitio tenga un tiempo de carga de primera página más rápido, lo cual es clave para una buena experiencia de usuario.
• Es esencial para el SEO: los motores de búsqueda no pueden (¿todavía?) indexar de manera eficiente y correcta las aplicaciones que se ejecutan exclusivamente en el lado del cliente. A pesar de las últimas mejoras en la indexación en Google, también hay otros motores de búsqueda, y Google no es perfecto en eso en ningún caso. Además, Google favorece los sitios con tiempos de carga rápidos, y tener que cargar en el lado del cliente no es bueno para la velocidad.
• Es genial cuando las personas comparten una página de tu sitio en las redes sociales, ya que pueden recopilar fácilmente los metadatos necesarios para compartir el enlace de forma agradable (imágenes, título, descripción…).

Sin la representación del lado del servidor, todo lo que envía el servidor es una página HTML sin cuerpo, solo algunas etiquetas de script que luego utiliza el navegador para representar la aplicación.

Las aplicaciones renderizadas por el cliente son excelentes para cualquier interacción posterior con el usuario después de la carga de la primera página. La renderización del lado del servidor nos permite lograr un punto intermedio entre las aplicaciones renderizadas por el cliente y las aplicaciones renderizadas por el backend: la página se genera en el lado del servidor, pero todas las interacciones con la página una vez que se ha cargado se gestionan en el lado del cliente.

Sin embargo, la representación del lado del servidor también tiene sus desventajas:

• Es justo decir que una prueba de concepto de SSR simple es simple, pero la complejidad de SSR puede crecer con la complejidad de su aplicación.
• La representación de una aplicación grande en el lado del servidor puede consumir muchos recursos y, con una carga pesada, incluso podría proporcionar una experiencia más lenta que la representación en el lado del cliente, ya que tiene un único cuello de botella.

Un ejemplo muy simple de lo que se necesita para renderizar una aplicación React del lado del servidor

Las configuraciones de SSR pueden volverse muy, muy complejas y la mayoría de los tutoriales incorporarán Redux , React Router y muchos otros conceptos desde el principio.

Para entender cómo funciona SSR, comencemos desde lo básico para implementar una prueba de concepto.

Siéntete libre de omitir este párrafo si solo quieres buscar en las bibliotecas que proporcionan SSR y no molestarte con el trabajo básico.

Para implementar SSR básico vamos a utilizar Express.

Si eres nuevo en Express o necesitas ponerte al día, consulta mi tutorial de Express aquí: https://thevalleyofcode.com/express .

Advertencia: la complejidad de SSR puede aumentar con la complejidad de tu aplicación. Esta es la configuración mínima para renderizar una aplicación React básica. Para necesidades más complejas, es posible que tengas que trabajar un poco más o también consultar las bibliotecas SSR para React.

Supongo que iniciaste una aplicación React con create-react-app. Si recién lo estás probando, instala una ahora usando npx create-react-app ssr.

Vaya a la carpeta principal de la aplicación con la terminal y luego ejecute:

npm install express

Tienes un conjunto de carpetas en el directorio de tu aplicación. Crea una nueva carpeta llamada server, luego ingresa a ella y crea un archivo llamado server.js.

Siguiendo las create-react-appconvenciones, la aplicación se encuentra en el src/App.jsarchivo. Vamos a cargar ese componente y a convertirlo en una cadena mediante ReactDOMServer.renderToString() , que proporciona react-dom.

Obtienes el contenido del ./build/index.htmlarchivo y reemplazas el div/divmarcador de posición, que es la etiqueta donde la aplicación se engancha de manera predeterminada, con “

${ReactDOMServer.renderToString()}`.

Todo el contenido dentro de la buildcarpeta se servirá tal cual, de forma estática, por Express.Te recomendamos Zonas Azules

import path from 'path'import fs from 'fs'import express from 'express'import React from 'react'import ReactDOMServer from 'react-dom/server'import App from '../src/App'const PORT = 8080const app = express()const router = express.Router()const serverRenderer = (req, res, next) = { fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) = { if (err) { console.error(err) return res.status(500).send('An error occurred') } return res.send( data.replace( 'div/div', `div${ReactDOMServer.renderToString(App /)}/div` ) ) })}router.use('^/$', serverRenderer)router.use( express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' }))// tell the app to use the above rulesapp.use(router)// app.use(express.static('./build'))app.listen(PORT, () = { console.log(`SSR running on port ${PORT}`)})

Ahora, en la aplicación cliente, en su src/index.js, en lugar de llamar a ReactDOM.render():

ReactDOM.render(App /, document.getElementById('root'))

call ReactDOM.hydrate(), que es lo mismo pero tiene la capacidad adicional de adjuntar detectores de eventos al marcado existente una vez que se carga React:

ReactDOM.hydrate(App /, document.getElementById('root'))

Todo el código Node.js debe ser transpilado por Babel , ya que el código Node.js del lado del servidor no sabe nada sobre JSX ni sobre los módulos ES (que usamos para las includedeclaraciones).

Instale estos 4 paquetes:

npm install @babel/register @babel/preset-env @babel/preset-react ignore-styles

ignore-styleses una utilidad de Babel que le indicará que ignore los archivos CSS importados utilizando la importsintaxis.

Vamos a crear un punto de entrada en server/index.js:

require('ignore-styles')require('@babel/register')({ ignore: [/(node_modules)/], presets: ['@babel/preset-env', '@babel/preset-react']})require('./server')

Construya la aplicación React, de modo que la carpeta build/ se complete:

npm run build

y ejecutemos esto:

node server/index.js

Dije que este es un enfoque simplista y lo es:

• No maneja correctamente la representación de imágenes al utilizar importaciones, que necesitan Webpack para funcionar (y lo que complica mucho el proceso)
• No maneja metadatos del encabezado de página, que son esenciales para fines de SEO y de compartir en redes sociales (entre otras cosas)

Si bien este es un buen ejemplo de cómo usar ReactDOMServer.renderToString()y ReactDOM.hydrateobtener esta representación básica del lado del servidor, no es suficiente para el uso en el mundo real.

Representación del lado del servidor mediante bibliotecas

Es difícil implementar SSR correctamente y React no tiene una forma de facto de implementarlo.

Todavía es muy discutible si vale la pena el esfuerzo, la complicación y los gastos generales para obtener los beneficios, en lugar de utilizar una tecnología diferente para gestionar esas páginas. Esta discusión en Reddit tiene muchas opiniones al respecto.

Cuando la renderización del lado del servidor es un asunto importante, mi sugerencia es confiar en bibliotecas y herramientas predefinidas que han tenido este objetivo en mente desde el principio.

En particular, sugiero Next.js y Gatsby .

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Representación del lado del servidor con React

La representación del lado del servidor , también llamada SSR , es la capacidad de una aplicación JavaScript de renderizarse en el servidor en lugar de en e

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente