Maison > Article > interface Web > Guide de rendu côté serveur React : Comment améliorer les performances des applications frontales

Guide de rendu côté serveur React : Comment améliorer les performances des applications frontales

PHPzoriginal: 2023-09-26 12:33:361084parcourir

React Server-side Rendering Guide : Comment améliorer les performances des applications frontales

Résumé : Avec le développement continu du développement d'applications frontales, l'optimisation des performances est devenue une question cruciale. Le rendu côté serveur (SSR), comme moyen efficace d'améliorer les performances des applications frontales, est choisi par de plus en plus de développeurs. Cet article présentera les principes et les pratiques du rendu côté serveur React et donnera des exemples de code spécifiques pour aider les lecteurs à améliorer les performances des applications frontales.

Qu'est-ce que le rendu côté serveur (SSR) ?

Le rendu côté serveur est une technologie qui exécute du code frontal côté serveur et génère des pages HTML. Les applications frontales traditionnelles utilisent JavaScript pour afficher les pages côté navigateur. Lorsque les utilisateurs visitent, le navigateur télécharge et exécute le code JavaScript pour générer le contenu de la page. Le rendu côté serveur fait progresser ce processus côté serveur et génère une page HTML complète lorsque l'utilisateur le demande, réduisant ainsi la charge du navigateur et améliorant la vitesse de chargement des pages et l'expérience utilisateur.

Le principe du rendu côté serveur React

React est une bibliothèque JavaScript basée sur des composants, et son avantage réside dans l'utilisation du DOM virtuel (Virtual DOM). Virtual DOM est une technologie que React utilise pour représenter les arborescences de composants sous forme d'objets JavaScript. En comparant les différences entre les arborescences DOM virtuelles rendues avant et après, elle peut réduire le redessinage et la réorganisation du navigateur et améliorer l'efficacité du rendu des pages.

Dans le rendu côté serveur, React restituera d'abord le composant en HTML sous la forme d'une chaîne via la méthode ReactDOMServer.renderToString. Cette chaîne HTML est ensuite envoyée au navigateur, et le navigateur insère simplement la chaîne HTML dans la page pour terminer le rendu.

Comment implémenter le rendu côté serveur dans React ?

Tout d'abord, nous devons créer un serveur à l'aide d'un framework de serveur Node.js, tel qu'Express.

// server.js
const express = require('express');
const React = require('react');
const { renderToString } = require('react-dom/server');
const App = require('./App'); // 你的React应用根组件

const app = express();

app.get('/', (req, res) => {
  res.send(`
    <html>
      <head>
        <title>React SSR</title>
      </head>
      <body>
        <div id="root">${renderToString(<App />)}</div>
        <script src="/bundle.js"></script>
      </body>
    </html>
  `);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

Le code ci-dessus est un exemple simple de rendu côté serveur, où App est le composant racine de votre application React.

Ensuite, nous devons écrire un script de build pour empaqueter notre application React dans un fichier bundle.js côté serveur.

// build.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.config');

const compiler = webpack(webpackConfig);

compiler.run((error, stats) => {
  if (error || stats.hasErrors()) {
    console.error('Build failed.');
    return;
  }
  console.log('Build successful.')
});

Enfin, côté navigateur, nous devons introduire le fichier bundle.js dans la page.

<!-- index.html -->
<html>
  <head>
    <title>React SSR</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

Optimiser davantage les performances du rendu côté serveur

Bien que le rendu côté serveur puisse améliorer les performances des applications frontales, il existe encore certains goulots d'étranglement en termes de performances. Voici quelques suggestions pour optimiser davantage les performances de rendu côté serveur.

Utiliser la mise en cache : en stockant les résultats du rendu dans le cache, vous pouvez éviter de restituer la même page encore et encore. Ceci peut être réalisé en utilisant des technologies de mise en cache telles que Redis ou Memcached.
Chargement asynchrone : pour certaines opérations susceptibles de bloquer le rendu des pages, telles que la demande de données, l'accès à des bases de données, etc., vous devez essayer d'utiliser des méthodes asynchrones.
Répartition du code : divisez le code de l'application en plusieurs petits morceaux et chargez-les à la demande pour éviter de charger l'intégralité de l'application.

Conclusion

Cet article présente les principes et les pratiques du rendu côté serveur React, ainsi que des suggestions pour optimiser davantage les performances de rendu côté serveur. Grâce au rendu côté serveur, nous pouvons améliorer les performances des applications frontales et optimiser l'expérience utilisateur. J'espère que le contenu ci-dessus pourra aider les lecteurs à mieux comprendre et appliquer la technologie de rendu côté serveur React.

Références :

Documentation officielle de React : https://reactjs.org/
Documentation du framework ReactDOMServer : https://reactjs.org/docs/react-dom-server.html
Documentation du framework Express : https://reactjs.org/docs/react-dom-server.html /expressjs.com/

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!

JavaScript html reactjs express 字符串 JS 对象 dom 异步 redis memcached 数据库 https 性能优化

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter des opérations par lots de base de données dans React QueryArticle suivant：Comment implémenter des opérations par lots de base de données dans React Query

Articles Liés

Voir plus