Comment créer des applications côté serveur efficaces à l'aide de React et Node.js

Comment utiliser React et Node.js pour créer des applications côté serveur efficaces

Ces dernières années, React et Node.js sont devenus des technologies très populaires dans le domaine du développement front-end. React est un framework frontal efficace qui peut nous aider à créer des interfaces utilisateur interactives, tandis que Node.js est une plate-forme de développement événementielle qui peut facilement créer des applications côté serveur efficaces. En combinant React et Node.js, nous pouvons créer des applications côté serveur plus efficaces et plus puissantes.

Dans cet article, nous explorerons comment utiliser React et Node.js pour créer des applications côté serveur efficaces et fournirons quelques exemples de code spécifiques.

Étape 1 : Créer la structure du projet

Tout d'abord, nous devons créer un nouveau projet pour créer une application côté serveur. Vous pouvez utiliser n'importe quel outil de création de projet que vous connaissez, tel que Create React App ou Webpack.

Créez un nouveau dossier dans le répertoire racine du projet et nommez-le serveur. Dans le dossier du serveur, créez un nouveau fichier nommé index.js comme fichier d'entrée pour notre code côté serveur.

Étape 2 : Construire un serveur de base

Dans le fichier index.js, nous devons importer certains modules nécessaires pour construire notre serveur de base. Nous pouvons utiliser Express.js pour créer rapidement un serveur simple.

Tout d’abord, nous devons installer Express.js. Dans le terminal, allez dans le dossier du serveur et exécutez la commande suivante :

npm install express

Puis, dans le fichier index.js, importez les modules requis :

const express = require('express');

// 创建Express实例
const app = express();

// 定义端口号
const port = 3000;

// 定义默认路由
app.get('/', (req, res) => {
  res.send('Hello, world!');
});

// 监听端口
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Ce code crée un simple serveur Express et sur la route racine Un simple texte la réponse a été renvoyée. Vous pouvez consulter les résultats en visitant http://localhost:3000 dans votre navigateur.

Étape 3 : Introduire les composants React

Maintenant que nous avons un serveur de base, nous allons introduire les composants React et les rendre sur le serveur.

Tout d'abord, nous devons installer React et ReactDOM. Dans le terminal, allez dans le répertoire racine du projet et exécutez la commande suivante :

npm install react react-dom

Ensuite, dans le fichier index.js, importez les modules requis :

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

// 创建Express实例
const app = express();

// 定义端口号
const port = 3000;

// 引入React组件
const App = require('./src/App');

// 定义默认路由
app.get('/', (req, res) => {
  // 将React组件渲染为HTML字符串
  const html = ReactDOMServer.renderToString(React.createElement(App));

  // 将HTML字符串发送给浏览器
  res.send(html);
});

// 监听端口
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Dans ce code, nous introduisons le composant App et utilisons ReactDOMServer Le renderToString La méthode le restitue sous forme de chaîne HTML. Nous envoyons ensuite cette chaîne HTML au navigateur afin qu'elle puisse être restituée par le serveur.

Étape 4 : Optimiser le rendu côté serveur

Dans l'étape précédente, nous avons réussi le rendu du composant React sur le serveur. Cependant, un tel rendu côté serveur n'est pas idéal car il ne tire pas parti des capacités de rendu côté client de React.

Pour optimiser le rendu côté serveur, nous pouvons utiliser la méthode d'hydratation de React. Dans le navigateur, nous utilisons la méthode ReactDOM.render pour restituer le composant dans le DOM et, ce faisant, le comparer au HTML rendu côté serveur.

Dans le fichier index.js, nous devons apporter quelques modifications au code de rendu côté serveur :

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const ReactDOM = require('react-dom');

// 创建Express实例
const app = express();

// 定义端口号
const port = 3000;

// 引入React组件
const App = require('./src/App');

// 定义默认路由
app.get('/', (req, res) => {
  // 将React组件渲染为HTML字符串
  const html = ReactDOMServer.renderToString(React.createElement(App));

  // 将HTML字符串发送给浏览器
  res.send(`
    <html>
      <head>
        <title>Server-side Rendering</title>
      </head>
      <body>
        <div id="root">${html}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

// 监听端口
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Dans le code ci-dessus, nous avons ajouté un fichier JavaScript requis pour le rendu côté client au HTML généré côté serveur lien de code. De cette façon, dans le navigateur, React comparera la structure HTML rendue côté serveur avec le code JavaScript rendu côté client, et mettra à jour uniquement les parties qui doivent être mises à jour, améliorant ainsi l'efficacité du rendu.

Étape 5 : Créer et déployer

Maintenant, nous avons terminé les étapes de base pour créer une application côté serveur efficace avec React et Node.js. Ensuite, nous devons construire et déployer.

Tout d'abord, nous devons créer notre application React. Dans le terminal, accédez au répertoire racine du projet et exécutez la commande suivante :

npm run build

Ensuite, nous devons déployer le code du serveur dans l'environnement de production. Vous pouvez choisir de le déployer sur n'importe quel serveur que vous connaissez, qu'il s'agisse d'un serveur cloud ou d'un serveur local.

Enfin, démarrez le serveur et accédez à l'URL du serveur dans le navigateur pour voir l'effet de rendu efficace de l'application React côté serveur.

Résumé

L'utilisation de React et Node.js pour créer des applications côté serveur efficaces peut combiner les capacités de rendu côté client de React avec les puissantes performances de Node.js, améliorant ainsi l'efficacité du rendu et l'expérience utilisateur de l'application. Grâce à l'introduction de cet article, nous avons appris comment créer un serveur de base, introduire les composants React, et utiliser la méthode d'hydratation pour optimiser le rendu côté serveur.

Bien sûr, ce ne sont que les étapes d'introduction à la création d'applications côté serveur efficaces avec React et Node.js. Dans les applications réelles, vous devrez peut-être également prendre en compte d'autres facteurs, tels que le routage, la connexion à la base de données, l'authentification de l'identité, etc. J'espère que cet article pourra vous aider à démarrer rapidement le développement d'applications côté serveur avec React et Node.js, offrant ainsi de meilleures performances et une meilleure expérience utilisateur pour votre application.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!