Guide de rendu côté serveur React : Comment améliorer les performances des applications frontales-js tutoriel-php.cn

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

PHPz

Libérer： 2023-09-26 12:33:36

original

1063 Les gens l'ont consulté

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

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');
});

Copier après la connexion

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.')
});

Copier après la connexion

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>

Copier après la connexion

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

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