Panduan pemaparan bahagian pelayan bertindak balas: Cara meningkatkan prestasi aplikasi bahagian hadapan-tutorial js-php.cn

Panduan pemaparan bahagian pelayan bertindak balas: Cara meningkatkan prestasi aplikasi bahagian hadapan

PHPz

Lepaskan： 2023-09-26 12:33:36

asal

1125 orang telah melayarinya

Panduan pemaparan bahagian pelayan bertindak balas: Cara meningkatkan prestasi aplikasi bahagian hadapan

React Panduan Rendering Bahagian Pelayan: Bagaimana untuk meningkatkan prestasi aplikasi bahagian hadapan

Abstrak: Dengan pembangunan berterusan pembangunan aplikasi bahagian hadapan, pengoptimuman prestasi telah menjadi isu penting. Rendering sisi pelayan (SSR), sebagai cara yang berkesan untuk meningkatkan prestasi aplikasi bahagian hadapan, dipilih oleh semakin ramai pembangun. Artikel ini akan memperkenalkan prinsip dan amalan pemaparan bahagian pelayan React dan memberikan contoh kod khusus untuk membantu pembaca meningkatkan prestasi aplikasi bahagian hadapan.

Apakah Rendering Sisi Pelayan (SSR)?

Perenderan bahagian pelayan ialah teknologi yang menjalankan kod bahagian hadapan pada bahagian pelayan dan menjana halaman HTML. Aplikasi bahagian hadapan tradisional menggunakan JavaScript untuk memaparkan halaman pada bahagian penyemak imbas Apabila pengguna melawat, penyemak imbas memuat turun dan melaksanakan kod JavaScript untuk menjana kandungan halaman. Perenderan bahagian pelayan memajukan proses ini ke bahagian pelayan dan menjana halaman HTML yang lengkap apabila pengguna memintanya, mengurangkan beban pada penyemak imbas dan meningkatkan kelajuan pemuatan halaman dan pengalaman pengguna.

Prinsip pemaparan bahagian pelayan React

React ialah perpustakaan JavaScript berasaskan komponen, dan kelebihannya terletak pada penggunaan DOM maya (DOM Maya). DOM maya ialah teknologi yang digunakan oleh React untuk mewakili pepohon komponen sebagai objek JavaScript Dengan membandingkan perbezaan antara pepohon DOM maya yang diberikan sebelum dan selepas, ia boleh mengurangkan lukisan semula dan penyusunan semula pelayar serta meningkatkan kecekapan pemaparan halaman.

Dalam pemaparan sebelah pelayan, React akan terlebih dahulu memaparkan komponen ke dalam HTML dalam bentuk rentetan melalui kaedah ReactDOMServer.renderToString. Rentetan HTML ini kemudiannya dihantar ke penyemak imbas, dan penyemak imbas hanya memasukkan rentetan HTML ke dalam halaman untuk melengkapkan pemaparan.

Bagaimana untuk melaksanakan pemaparan sebelah pelayan dalam React?

Pertama, kita perlu mencipta pelayan menggunakan rangka kerja pelayan Node.js, seperti 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');
});

Salin selepas log masuk

Kod di atas ialah contoh pemaparan sebelah pelayan yang mudah, dengan Apl ialah komponen akar aplikasi React anda.

Seterusnya, kami perlu menulis skrip binaan untuk membungkus aplikasi React kami ke dalam fail bundle.js di bahagian pelayan.

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

Salin selepas log masuk

Akhir sekali, di bahagian pelayar kita perlu memperkenalkan fail bundle.js ke dalam halaman.

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

Salin selepas log masuk

Mengoptimumkan lagi prestasi pemaparan bahagian pelayan

Walaupun pemaparan bahagian pelayan boleh meningkatkan prestasi aplikasi bahagian hadapan, masih terdapat beberapa kesesakan prestasi. Berikut ialah beberapa cadangan untuk mengoptimumkan lagi prestasi pemaparan sebelah pelayan.

Gunakan cache: Dengan menyimpan hasil pemaparan dalam cache, anda boleh mengelak daripada memaparkan halaman yang sama berulang kali. Ini boleh dicapai menggunakan teknologi caching seperti Redis atau Memcached.
Pemuatan tak segerak: Untuk sesetengah operasi yang mungkin menyekat pemaparan halaman, seperti meminta data, mengakses pangkalan data, dsb., anda harus cuba menggunakan kaedah tak segerak.
Pembahagian Kod: Pisahkan kod aplikasi kepada beberapa bahagian kecil dan muatkannya atas permintaan untuk mengelakkan memuatkan keseluruhan aplikasi.

Kesimpulan

Artikel ini memperkenalkan prinsip dan amalan pemaparan bahagian pelayan React, serta cadangan untuk mengoptimumkan lagi prestasi pemaparan bahagian pelayan. Melalui pemaparan bahagian pelayan, kami boleh meningkatkan prestasi aplikasi bahagian hadapan dan mengoptimumkan pengalaman pengguna. Saya berharap kandungan di atas dapat membantu pembaca lebih memahami dan menggunakan teknologi pemaparan bahagian pelayan React.

Rujukan:

React dokumentasi rasmi: https://reactjs.org/
ReactDOMServer dokumentasi: https://reactjs.org/docs/react-dom-server.html
Express / dokumentasi rangka kerja: https: /expressjs.com/

Atas ialah kandungan terperinci Panduan pemaparan bahagian pelayan bertindak balas: Cara meningkatkan prestasi aplikasi bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!