One place for hosting & domains

      habilitar

      Cómo habilitar la renderización del lado del servidor para una aplicación React


      Introducción

      La renderización del lado del servidor (SSR) es una técnica popular para renderizar una aplicación de una sola página (SPA) del lado del cliente en el servidor y enviar una página completamente renderizada al cliente. Esto permite que los componentes dinámicos se presenten como marcado HTML estático.

      Este enfoque puede ser útil para la optimización del motor de búsqueda (SEO) cuando la indexación no gestiona el JavaScript correctamente. También puede ser beneficioso en situaciones en las que descargar un paquete JavaScript grande sea difícil debido a una red lenta.

      En este tutorial, iniciará una aplicación React usando Create React App y luego modificará el proyecto para habilitar la renderización del lado del servidor.

      Al final de este tutorial, tendrá un proyecto funcional con una aplicación React del lado del cliente y una aplicación Express del lado del servidor.

      Nota: Alternativamente, Next.js ofrece un enfoque moderno para crear aplicaciones renderizadas estáticas y en servidor creadas con React.

      Requisitos previos

      Para completar este tutorial, necesitará lo siguiente:

      Este tutorial se verificó con Node v14.4.0 y npm v6.14.5.

      Paso 1: Crear la aplicación React y modificar el componente de la aplicación

      Primero, usamos npx para iniciar una nueva aplicación React usando la última versión de Create React App.

      Vamos a invocar nuestra aplicación my-ssr-app:

      • npx create-react-app@3.4.1 my-ssr-app

      A continuación, hacemos cd al nuevo directorio:

      cd my-ssr-app
      

      Finalmente, iniciamos nuestra nueva aplicación del lado del cliente para verificar la instalación:

      Debería ver una aplicación React de ejemplo en la ventana de su navegador.

      Ahora, vamos a crear un componente <Home>:

      A continuación, añada el siguiente código al archivo Home.js:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Esto creará un encabezado <h1> con un mensaje "Hello" dirigido a un nombre.

      A continuación, vamos a renderizar <Home> en el componente <App>. Abra el archivo App.js:

      Luego, sustituya las líneas de código existentes con estas nuevas líneas de código:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Esto pasa un nombre al componente <Home> de forma que el mensaje que esperamos mostrar sea "Hello Sammy!".

      En el archivo index.js de nuestra aplicación, usaremos el método hydrate de ReactDOM en vez de render para indicar al renderizador DOM que estamos rehidratando la aplicación tras una renderización del lado del servidor.

      Vamos a abrir el archivo index.js:

      A continuación, sustituya el contenido del archivo index.js con el siguiente código:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Con esto concluye la configuración del lado del cliente y podemos pasar a configurar el lado del servidor.

      Paso 2: Crear un servidor Express y renderizar el componente de la aplicación

      Ahora que tenemos nuestra aplicación lista, vamos a configurar un servidor que enviará una versión renderizada. Usaremos Express para nuestro servidor. Vamos a añadirlo al proyecto introduciendo el siguiente comando en la ventana de su terminal:

      • npm install express@4.17.1

      O usando yarn:

      A continuación, cree un directorio server junto al directorio src de la aplicación:

      A continuación, cree un nuevo archivo index.js que contendrá el código del servidor Express:

      Añada las importaciones que necesitará y defina algunas constantes:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      A continuación, añada el código del servidor con algunas funciones para la gestión de errores:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Como puede ver, podemos importar nuestro componente <App> desde la aplicación del cliente directamente desde el servidor.

      Aquí suceden tres cosas importantes:

      • Indicaremos a Express que sirva contenido desde el directorio build como archivos estáticos.
      • Usamos un método desde ReactDOMServer, renderToString para renderizar nuestra aplicación a una secuencia HTML estática.
      • A continuación, leemos el archivo estático index.html desde la aplicación creada del cliente, inyectamos el contenido estático de nuestra aplicación en el <div> con un id de "root" y enviamos eso como la respuesta a la solicitud.

      Paso 3: Configurar webpack, Babel y secuencias de comandos npm

      Para que funcione el código de nuestro servidor, necesitaremos empaquetarlo y compilarlo usando webpack y Babel. Para conseguir esto, vamos a añadir las dependencias dev al proyecto introduciendo el siguiente comando en la ventana de su terminal:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      O usando yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Nota: Una versión anterior de este tutorial instaló babel-core, babel-preset-env, y babel-preset-react-app. Estos paquetes han sido archivados desde entonces, y se utilizan las versiones repo mono.

      A continuación, cree un archivo de configuración Babel:

      A continuación, añada los valores prestablecidos env y react-app:

      .babelrc.json

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

      Nota: Una versión anterior de este tutorial usó un archivo .babelrc (no una extensión de archivo .json). Este era un archivo de configuración para Babel 6, pero ya no es así para Babel 7.

      Ahora, crearemos una configuración webpack para el servidor que utiliza Babel Loader para compilar el código. Comience creando el archivo:

      Luego, añada las siguientes configuraciones al archivo webpack.server.js:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Con esta configuración, nuestro paquete compilado de servidor aparecerá a la carpeta server-build en un archivo llamado index.js.

      Observe que el uso target: 'node' y externals: [nodeExternals()] desde webpack-node-externals, que solo omitirá los archivos desde node_modules en el paquete; el servidor puede acceder a estos archivos directamente.

      Esto completa la instalación de la dependencia y la configuración de webpack y Babel.

      Ahora repasaremos package.json para ayudar secuencias de comandos npm de ayuda:

      Añadiremos secuencias de comandos dev:build-server, dev:start y dev al archivo package.json para crear y presentar nuestra aplicación SSR fácilmente:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Usamos nodemon para reiniciar el servidor cuando realicemos cambios. Y usamos npm-run-all para ejecutar varios comandos en paralelo.

      Vamos a instalar esos paquetes ahora introduciendo los siguientes comandos en la ventana de su terminal:

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      O usando yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Con esto, puede ejecutar lo siguiente para crear la aplicación del lado del cliente, empaquetar y compilar el código del servidor e iniciar el servidor en :3006:

      O usando yarn:

      La configuración webpack de nuestro servidor vigilará los cambios y nuestro servidor se reiniciará cuando haya cambios. Para la aplicación cliente, sin embargo, actualmente aún debemos crearla cada vez que realicemos cambios. Hay un problema abierto para eso aquí.

      Ahora, abra http://localhost:3006/ en su navegador web y verá su aplicación renderizada en el lado del servidor.

      Previamente, el código fuente reveló:

      Output

      <div id="root"></div>

      Pero ahora, con los cambios que ha realizado, el código fuente revela:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      La renderización del lado del servidor convirtió el componente <App> a HTML.

      Conclusión

      En este tutorial, inició una aplicación React y habilitó la renderización del lado del servidor.

      Con esta publicación, solo hemos visto un poco de lo que es posible. Las cosas se complican un poco cuando el direccionamiento, la recuperación de datos o Redux también tengan que ser parte de una aplicación renderizada en el lado del servidor.

      Un beneficio importante de usar SR es tener una aplicación que pueda rastrearse para ver su contenido, incluso para rastreadores que no ejecutan código JavaScript. Esto puede ayudar con la optimización de los motores de búsqueda (SEO) y la transmisión de metadatos a los canales de redes sociales.

      SSR también puede ayudar a menudo con el rendimiento porque una aplicación completamente cargada se envía desde el servidor sobre la primera solicitud. Para aplicaciones no triviales, su valor puede variar porque SSR requiere una configuración que puede volverse algo complicada y crea una mayor carga sobre el servidor. Si utiliza la renderización del lado del servidor para su aplicación React depende de sus necesidades específicas y de qué ventajas tienen más sentido para su caso de uso.

      Si desea aprender más sobre React, eche un vistazo a nuestra serie Cómo crear código en React.js, o consulte nuestra página del tema React para ver ejercicios y proyectos de programación.



      Source link

      Como habilitar a renderização do servidor para um aplicativo React


      Introdução

      A renderização do servidor (do inglês, SSR) é uma técnica popular para renderizar um aplicativo de página única (do inglês, SPA) no servidor e então enviar uma página totalmente renderizada ao cliente. Isso permite que componentes dinâmicos sejam servidos como uma marcação HTML estática.

      Essa abordagem pode ser útil para o motor de otimização de busca (do inglês, SEO) quando a indexação não manipular o JavaScript corretamente. Ela também pode ser benéfica em situações em que baixar um pacote grande do JavaScript for um processo difícil por conta de uma rede lenta.

      Neste tutorial, você irá inicializar um aplicativo React usando o Create React App e então modificar o projeto para habilitar a renderização do servidor.

      No final deste tutorial, você terá um projeto funcional com um aplicativo React do lado do cliente e um aplicativo Express do lado do servidor.

      Nota: De maneira alternativa, o Next.js oferece uma abordagem moderna para criar aplicativos estáticos e renderizados no servidor desenvolvidos com o React.

      Pré-requisitos

      Para completar este tutorial, você precisará de:

      Este tutorial foi verificado com o Node v14.4.0 e o npm v6.14.5.

      Passo 1 — Criando o aplicativo React e modificando o componente do aplicativo

      Primeiro, vamos usar o npx para iniciar um novo aplicativo React usando a versão mais recente do Create React App.

      Vamos chamar nosso aplicativo my-ssr-app:

      • npx create-react-app@3.4.1 my-ssr-app

      Em seguida, vamos usar o cd para entrar no novo diretório:

      cd my-ssr-app
      

      Por fim, iniciamos nosso novo aplicativo de cliente para verificar a instalação:

      Você deve ver um exemplo de aplicativo do React em exibição na janela do seu navegador.

      Agora, vamos criar um componente <Home>:

      Depois, adicione o código a seguir ao arquivo Home.js:

      src/Home.js

      import React from 'react';
      
      export default props => {
        return <h1>Hello {props.name}!</h1>;
      };
      

      Isso irá criar um cabeçalho <h1> com uma mensagem "Hello" dirigida a um nome.

      Em seguida, vamos renderizar o <Home> no componente <App>. Abra o arquivo App.js:

      Depois disso, substitua as linhas de código existentes por essas novas linhas:

      src/App.js

      import React from 'react';
      import Home from './Home';
      
      export default () => {
        return <Home name="Sammy" />;
      };
      

      Isso passa adiante um name ao componente <Home>, de forma que a mensagem que esperamos receber é "Hello Sammy!".

      No arquivo index.js do nosso aplicativo, vamos usar o método hydrate do ReactDOM ao invés do render, para indicar ao renderizador DOM que estamos reabastecendo o aplicativo após um render do servidor.

      Vamos abrir o arquivo index.js:

      Em seguida, substitua o conteúdo do arquivo index.js pelo seguinte código:

      index.js

      import React from 'react';
      import ReactDOM from 'react-dom';
      import App from './App';
      
      ReactDOM.hydrate(<App />, document.getElementById('root'));
      

      Aqui termina a configuração do lado do cliente. Podemos seguir agora para a configuração do lado do servidor.

      Passo 2 — Criando um servidor Express e renderizando o componente do aplicativo

      Agora que temos nosso aplicativo instalado, vamos configurar um servidor que irá enviar uma versão renderizada. Vamos usar o Express para o nosso servidor. Vamos adicioná-lo ao projeto inserindo o seguinte comando em sua janela de terminal:

      • npm install express@4.17.1

      Ou, usando o yarn:

      Em seguida, crie um diretório server próximo ao diretório src do aplicativo:

      Depois disso, crie um novo arquivo index.js que irá conter o código do servidor Express:

      Adicione as importações necessárias e defina algumas constantes:

      server/index.js

      import path from 'path';
      import fs from 'fs';
      
      import React from 'react';
      import express from 'express';
      import ReactDOMServer from 'react-dom/server';
      
      import App from '../src/App';
      
      const PORT = process.env.PORT || 3006;
      const app = express();
      

      Em seguida, adicione o código do servidor com algum gerenciamento de erro:

      server/index.js

      // ...
      
      app.get('/', (req, res) => {
        const app = ReactDOMServer.renderToString(<App />);
      
        const indexFile = path.resolve('./build/index.html');
        fs.readFile(indexFile, 'utf8', (err, data) => {
          if (err) {
            console.error('Something went wrong:', err);
            return res.status(500).send('Oops, better luck next time!');
          }
      
          return res.send(
            data.replace('<div id="root"></div>', `<div id="root">${app}</div>`)
          );
        });
      });
      
      app.use(express.static('./build'));
      
      app.listen(PORT, () => {
        console.log(`Server is listening on port ${PORT}`);
      });
      

      Como pode ver, podemos importar nosso componente <App> do aplicativo cliente diretamente do servidor.

      Três coisas importantes estão acontecendo aqui:

      • Dizemos ao Express para servir conteúdo do diretório build como arquivos estáticos.
      • Usamos um método do ReactDOMServer, o renderToString, para renderizar nosso aplicativo em uma string HTML estática.
      • Depois disso, lemos o arquivo index.html do aplicativo cliente construído, injetamos o conteúdo estático do nosso aplicativo no <div> com um id de "root" e enviamos isso como a resposta à solicitação.

      Passo 3 — Configurando o webpack, Babel e os scripts npm

      Para que o código do nosso servidor funcione, vamos precisar empacotar e transcompila-lo usando o webpack e o Babel. Para fazer isso, vamos adicionar as dependências de desenvolvimento ao projeto inserindo o seguinte comando em sua janela de terminal:

      • npm install webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --save-dev

      Ou, usando o yarn:

      • yarn add webpack@4.42.0 webpack-cli@3.3.12 webpack-node-externals@1.7.2 @babel/core@7.10.4 babel-loader@8.1.0 @babel/preset-env@7.10.4 @babel/preset-react@7.10.4 --dev

      Nota: uma versão anterior deste tutorial instalava o babel-core, babel-preset-env e babel-preset-react-app. Esses pacotes foram arquivados desde então e, ao invés deles, as versões de repositório único são utilizadas.

      Em seguida, crie um arquivo de configuração do Babel:

      Depois disso, adicione as predefinições do env e do react-app:

      .babelrc.json

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

      Nota: uma versão anterior deste tutorial usava um arquivo .babelrc (sem extensão de arquivo .json). Esse era um arquivo de configuração para o Babel 6, o que não é mais o caso para o Babel 7.<

      Agora, vamos criar uma configuração do webpack para o servidor que usa o Babel Loader para transcompilar o código. Comece criando o arquivo:

      Depois, adicione as configurações a seguir ao arquivo webpack.server.js:

      webpack.server.js

      const path = require('path');
      const nodeExternals = require('webpack-node-externals');
      
      module.exports = {
        entry: './server/index.js',
      
        target: 'node',
      
        externals: [nodeExternals()],
      
        output: {
          path: path.resolve('server-build'),
          filename: 'index.js'
        },
      
        module: {
          rules: [
            {
              test: /.js$/,
              use: 'babel-loader'
            }
          ]
        }
      };
      

      Com essa configuração, nosso pacote de servidor transcompilado será enviado para a pasta server-build em um arquivo chamado index.js.

      Observe o uso de target: 'node' e externals: [nodeExternals()] de webpack-node-externals, que irá omitir os arquivos de node_modules no pacote. O servidor pode acessar esses arquivos diretamente.

      Isso completa a instalação de dependência e webpack, assim como a configuração do Babel.

      Agora, vamos revisitar o package.json para adicionar scripts auxiliares do npm:

      Vamos adicionar os scripts dev:build-server, dev:start, e dev ao arquivo package.json para compilar e servir nosso aplicativo SSR facilmente:

      package.json

      "scripts": {
        "dev:build-server": "NODE_ENV=development webpack --config webpack.server.js --mode=development -w",
        "dev:start": "nodemon ./server-build/index.js",
        "dev": "npm-run-all --parallel build dev:*",
        ...
      },
      

      Usamos o nodemon para reiniciar o servidor quando fazemos alterações nele. E usamos o npm-run-all para executar vários comandos em paralelo.

      Vamos instalar esses pacotes agora inserindo os seguintes comandos em sua janela de terminal:

      • npm install nodemon@2.0.4 npm-run-all@4.1.5 --save-dev

      Ou, usando o yarn:

      • yarn add nodemon@2.0.4 npm-run-all@4.1.5 --dev

      Com isso no lugar, é possível executar o seguinte para compilar o aplicativo do cliente, empacotar e transcompilar o código do servidor e iniciar o servidor em :3006:

      Ou, usando o yarn:

      Nossa configuração do webpack do servidor irá monitorar alterações e nosso servidor irá reiniciar nas alterações. No entanto, para o aplicativo cliente, ainda precisamos compilá-lo cada vez que fizermos alterações. Há um problema aberto para isso aqui.

      Agora, abra http://localhost:3006/ no seu navegador Web e você verá seu aplicativo do servidor renderizado.

      Anteriormente, o código fonte revelava:

      Output

      <div id="root"></div>

      Mas agora, com as alterações feitas, o código fonte revela:

      Output

      <div id="root"><h1 data-reactroot="">Hello <!-- -->Sammy<!-- -->!</h1></div>

      O renderizador do servidor converteu o componente <App> em HTML com sucesso.

      Conclusão

      Neste tutorial, você inicializou um aplicativo React e habilitou a renderização do servidor.

      Com este post, apenas abordamos o mais básico dentro de tudo aquilo que é possível. As coisas tendem a ficar um pouco mais complicadas quando o encaminhamento, coleta de dados, ou o Redux também precisam fazer parte de um aplicativo renderizado no servidor.

      Um dos principais benefícios de usar o SSR é ter um aplicativo que pode ser rastreado por seu conteúdo, mesmo por rastreadores que não executam código JavaScript. Isso pode ajudar com a otimização de mecanismos de busca (SEO) e fornecendo metadados aos canais de mídia social.

      O SSR também pode ajudar com o desempenho, pois um aplicativo totalmente carregado é enviado do servidor na primeira solicitação. Para aplicativos não triviais, a efetividade desse método pode variar, pois o SSR requer uma configuração que pode ficar um tanto complicada e cria uma carga maior no servidor. Saber quando usar a renderização do servidor para o seu aplicativo React depende de suas necessidades específicas e quais recursos fazem mais sentido para o seu caso de uso.

      Se quiser aprender mais sobre o React, dê uma olhada em nossa série Como programar no React.js, ou confira nossa página do tópico React para exercícios e projetos de programação.



      Source link