Cómo implementar la renderización del lado del servidor en tu aplicación React en tres simples pasos

Original article: How to implement server-side rendering in your React app in three simple steps

Escrito por Rohit Kumar

Esto es lo que construiremos en este tutorial: una buena tarjeta React como esta.

En este tutorial, utilizaremos la renderización del lado del servidor para ofrecer una respuesta HTML cuando un usuario o rastreador accede a la URL de una página. Manejaremos las últimas solicitudes en el lado del cliente.

¿Por qué lo necesitamos?

Déjame guiarte a la respuesta.

¿Cuál es la diferencia entre la representación del lado del cliente y la representación del lado del servidor?

En la renderización del lado del cliente, tu navegador descarga una página HTML mínima. Representa el JavaScript y llena el contenido en él.

Renderización del lado del servidor, por otro lado, renderiza los componentes de React en el servidor. La salida es contenido HTML.

Puede combinar estos dos para crear una aplicación isomorfa.

Contras de renderizar React en el servidor

• SSR puede mejorar el rendimiento si su aplicación es pequeña. Pero también puede degradar el rendimiento si es pesado.
• Aumenta el tiempo de respuesta (y puede ser peor si el servidor está ocupado).
• Aumenta el tamaño de la respuesta, lo que significa que la página tarda más en cargarse.
• Aumenta la complejidad de la aplicación.

¿Cuándo debería utilizar la representación del lado del servidor?

A pesar de estas consecuencias de SSR, hay algunas situaciones en las que puede y debe usarlo.

1. SEO

Todos los sitios web quieren aparecer en las búsquedas. Corrígeme si me equivoco.

Desafortunadamente, los rastreadores de los motores de búsqueda aún no entienden o procesan JavaScript.

Esto significa que ven una página en blanco, sin importar cuán útil sea su sitio.

Mucha gente dice que el rastreador de Google ahora muestra JavaScript.

Para probar esto, implementé la aplicación en Heroku. Esto es lo que vi en la consola de búsqueda de Google:

Una página en blanco.

Esta fue la principal razón por la que exploré el renderizado del lado del servidor. Especialmente cuando se trata de una página fundamental, como una página de destino, un blog, etc.

Para verificar si Google renderiza tu sitio, visite:

Panel de la Consola de Búsqueda > Inspeccionar URL > Explorar como Google. Ingrese la URL de la página o déjela vacía para la página de inicio.

Selecciona BUSCAR Y RENDERIZAR. Una vez completado, haga clic para ver el resultado.

2. Mejorar el rendimiento

En SSR, el rendimiento de la aplicación depende de los recursos del servidor y la velocidad de la red del usuario. Esto lo hace muy útil para sitios con mucho contenido.

Por ejemplo, supongamos que tienes un teléfono móvil de precio medio con una velocidad de internet lenta. Intenta acceder a un sitio que descarga 4 MB de datos antes de poder ver nada.

¿Serías capaz de ver algo en tu pantalla dentro de 2 a 4 segundos?

¿Volverías a visitar ese sitio?

No creo que lo harías.

Otra mejora importante es el tiempo de interacción con el primer usuario. Esta es la diferencia en el tiempo desde que un usuario accede a la URL hasta que ve el contenido.

Aquí está la comparación. Lo probé en una Mac de desarrollo.

React renderizado en el servidor

El tiempo de la primera interacción es de 300ms. Hidratar los acabados a los 400ms. El evento de carga sale a los 500ms aproximadamente. Puedes ver esto mirando la imagen de arriba.

React renderizado en el navegador del cliente

El tiempo de la primera interacción es de 400ms. El evento de carga sale a los 470 ms.

El resultado habla por sí mismo. Hay una diferencia de 100 ms en el tiempo de interacción del primer usuario para una aplicación tan pequeña.

¿Cómo funciona? — (4 pasos simples)

• Cree una tienda Redux nueva en cada solicitud.
• Opcionalmente, envíe algunas acciones.
• Saque el estado de la tienda y almacena realiza SSR.
• Envía el estado obtenido en el paso anterior junto con la respuesta.

Usaremos el estado pasado en la respuesta para crear el estado inicial en el lado del cliente.

Antes de comenzar, clone o descargue el ejemplo completo de Github y utilícelo como referencia.

Primeros pasos configurando nuestra aplicación

Primero, abra su editor y Shell favoritos. Cree una nueva carpeta para su aplicación. Empecemos.

npm init --yes

Complete los detalles. Después es generado package.json, copie las dependencias y scripts a continuación en él.

Instale todas las dependencias ejecutando:

npm install

Ahora debe configurar Babel y webpack para que nuestro script de compilación funcione.

Babel transforma ESM y React en código que el navegador pueda entender.

Crear un nuevo archivo .babelrc y poner la línea de abajo en él.

{
  "presets": ["@babel/env", "@babel/react"]
}

webpack agrupa nuestra aplicación y sus dependencias en un solo archivo. Crear otro archivo webpack.config.js con el siguiente código en él:

const path = require('path');module.exports = {
    entry: {
        client: './src/client.js',
        bundle: './src/bundle.js'
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: "[name].js"
    },
    module: {
        rules: [
            { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }
        ]
    }
}

Los dos archivos de salida del proceso de compilación:

1. assets/bundle.js — aplicación pura del lado del cliente.
2. assets/client.js — Aplicación del lado del servidor SSR.

La src/ carpeta contiene el código fuente. Los archivos compilados de Babel van en views/. views el directorio se creará automáticamente si no está presente.

¿Por qué necesitamos compilar archivos fuente?

Desafortunadamente, React no funcionan en Node. Aquí viene Babel al rescate. El siguiente script le dice a Babel que compile todos los archivos en la carpeta src y ponga el resultado en la carpeta views.

"babel": "babel src -d views",

Ahora, Node puede ejecutarlos.

Copia archivos precodificados y estáticos

Si ya ha clonado el repositorio, cópielo. De lo contrario, descargue el archivo ssr-static.zip de Dropbox. Extráigalo y mantenga estas tres carpetas dentro del directorio de su aplicación. Esto es lo que contienen.

1. React App y los componentes residen en src/components.
2. Archivos redux en src/redux/.
3. assets/ & media/: Contiene archivos estáticos como style.css y las imágenes.

Lado del servidor

Crear dos nuevos archivos llamados server.js y template.js dentro de src/ carpeta.

1. src/server.js

La magia sucede aquí. Este es el código que has estado buscando.

import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

module.exports = function render(initialState) {
  // Model the initial state  
  const store = configureStore(initialState);
  let content = renderToString(<Provider store={store} ><App /></Provider>);
  const preloadedState = store.getState();
  return {
    content,
    preloadedState
  };
};

En lugar de representar nuestra aplicación, debemos envolverla en una función y exportarla. La función acepta el estado inicial de la aplicación.

Así es como funciona.

1. Pasa initialState a la función configureStore(). configureStore()devuelve una nueva instancia de Store. Lo almacena dentro de la variable store.
2. Llama el método renderToString(), proporciona nuestra aplicación como entrada. Representa nuestra aplicación en el servidor y devuelve el HTML producido. Ahora, la variable content almacena el HTML.
3. Saca el estado de Redux Store llamando getState() en store. Guárdalo en una variable preloadedState.
4. Devuelve content y preloadedState. Los pasaremos a nuestra plantilla para obtener la página HTML final.

2. src/template.js

template.js exporta una función. Se necesita title, state y content como entrada. Los inyecta en la plantilla y devuelve el documento HTML final.

Para pasar a lo largo del estado, la plantilla adjunta state a window.__STATE__ dentro de una <script>i etiqueta.

Ahora puedes leer state en el lado del cliente accediendo window.__STATE__.

También incluimos el compañero SSR assets/client.js aplicación del lado del cliente en otra etiqueta de secuencia de comandos.

Si solicita la versión de cliente puro, solo pone assets/bundle.js dentro de la etiqueta del script.

El lado del cliente

El lado del cliente es bastante sencillo.

1. src/bundle.js

Así es como se escribe React y Redux Provider envuelto. Es nuestra aplicación pura del lado del cliente. No hay trucos aquí.

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

const store = configureStore();
render(
  <Provider store={store} > <App /> </Provider>,
  document.querySelector('#app')
);

2. src/client.js

¿Luce familiar? Sí, no hay nada especial, excepto window.__STATE__. Todo lo que tenemos que hacer es tomar el estado inicial de window.__STATE__ Y pasarlo a nuestra función configureStore() como el estado inicial.

Echemos un vistazo a nuestro nuevo archivo de cliente:

import React from 'react';
import { hydrate } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import App from './components/app';

const state = window.__STATE__;
delete window.__STATE__;
const store = configureStore(state);
hydrate(
  <Provider store={store} > <App /> </Provider>,
  document.querySelector('#app')
);

Repasemos los cambios:

1. Reemplaza render() con hydrate(). hydrate() es lo mismo que render(), pero se utiliza para hidratar elementos producidos por ReactDOMServer. Garantiza que el contenido sea el mismo en el servidor y en el cliente.
2. Lee el estado del objeto en window object window.__STATE__. Guárdelo en una variable y elimine el window.__STATE__.
3. Crea una nueva tienda con state como estado inicial.

Todo hecho aquí.

Poniéndolo todo junto

Index.js

Este es el punto de entrada de nuestra aplicación. Maneja solicitudes y plantillas.

También declara una variableinitialState. Lo he modelado con datos en el archivo assets/data.json . La pasaremos a nuestra función ssr().

Nota: Al hacer referencia a un archivo que está dentro src/ de un archivo fuera src/, uso normal require() y reemplace src/ por views/. tu sabes la razon (compila Babel).

Enrutamiento

1. /: Por defecto, la página de inicio renderizada por el servidor.
2. /client: Ejemplo puro de representación del lado del cliente.
3. /exit: Botón de parada del servidor. Solo disponible en desarrollo.

Construir y ejecuta

Es hora de construir y ejecutar nuestra aplicación. Podemos hacer esto con una sola línea de código.

npm run build && npm run start

Ahora, la aplicación se está ejecutando en http://localhost:3000.

¿Listo para convertirte en un Pro en React?

Comenzaré una nueva serie a partir del próximo lunes para que tus habilidades de React ardan de inmediato.

Gracias por leer este tutorial