Cara membina aplikasi sisi pelayan yang cekap menggunakan React dan Node.js

Cara menggunakan React dan Node.js untuk membina aplikasi sisi pelayan yang cekap

Dalam beberapa tahun kebelakangan ini, React dan Node.js telah menjadi teknologi yang sangat popular dalam bidang pembangunan bahagian hadapan. React ialah rangka kerja bahagian hadapan yang cekap yang boleh membantu kami membina antara muka pengguna interaktif, manakala Node.js ialah platform pembangunan dipacu peristiwa yang boleh membina aplikasi sisi pelayan yang cekap dengan mudah. Menggabungkan React dan Node.js, kami boleh membina aplikasi bahagian pelayan yang lebih cekap dan berkuasa.

Dalam artikel ini, kami akan meneroka cara menggunakan React dan Node.js untuk membina aplikasi sisi pelayan yang cekap dan menyediakan beberapa contoh kod khusus.

Langkah 1: Buat struktur projek

Pertama, kita perlu mencipta projek baharu untuk membina aplikasi sebelah pelayan. Anda boleh menggunakan mana-mana alat pembinaan projek yang anda biasa gunakan, seperti Create React App atau Webpack.

Buat folder baharu dalam direktori akar projek dan namakannya pelayan. Dalam folder pelayan, cipta fail baharu bernama index.js sebagai fail masukan untuk kod sebelah pelayan kami.

Langkah 2: Bina pelayan asas

Dalam fail index.js, kami perlu mengimport beberapa modul yang diperlukan untuk membina pelayan asas kami. Kami boleh menggunakan Express.js untuk membina pelayan mudah dengan cepat.

Mula-mula, kita perlu memasang Express.js. Di terminal, pergi ke folder pelayan dan laksanakan arahan berikut:

npm install express

Kemudian, dalam fail index.js, import modul yang diperlukan:

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

Kod ini mencipta pelayan Express yang ringkas dan pada laluan akar Teks ringkas respons telah dikembalikan. Anda boleh melihat keputusan dengan melawati http://localhost:3000 dalam penyemak imbas anda.

Langkah 3: Perkenalkan komponen React

Sekarang kami mempunyai pelayan asas, kami akan memperkenalkan komponen React dan memberikannya kepada pelayan.

Pertama, kita perlu memasang React dan ReactDOM. Dalam terminal, pergi ke direktori akar projek dan laksanakan arahan berikut:

npm install react react-dom

Kemudian, dalam fail index.js, import modul yang diperlukan:

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

Dalam kod ini, kami memperkenalkan komponen Apl dan menggunakan ReactDOMServer The renderToString kaedah menjadikannya sebagai rentetan HTML. Kami kemudian menghantar rentetan HTML ini kepada penyemak imbas supaya ia boleh diberikan oleh pelayan.

Langkah 4: Optimumkan pemaparan sebelah pelayan

Dalam langkah sebelumnya, kami telah berjaya memberikan komponen React kepada pelayan. Walau bagaimanapun, pemaparan sebelah pelayan sedemikian tidak sesuai kerana ia tidak mengambil kesempatan daripada keupayaan pemaparan sebelah pelanggan React.

Untuk mengoptimumkan pemaparan sebelah pelayan, kami boleh menggunakan kaedah penghidratan React. Dalam penyemak imbas, kami menggunakan kaedah ReactDOM.render untuk memaparkan komponen ke dalam DOM dan dalam proses membandingkannya dengan HTML yang diberikan sebelah pelayan.

Dalam fail index.js, kami perlu membuat beberapa pengubahsuaian pada kod pemaparan sebelah pelayan:

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

Dalam kod di atas, kami telah menambah fail JavaScript yang diperlukan untuk pemaparan sebelah klien kepada HTML yang dijana dari sisi pelayan pautan kod. Dengan cara ini, dalam penyemak imbas, React akan membandingkan struktur HTML yang diberikan pada bahagian pelayan dengan kod JavaScript yang diberikan pada bahagian klien, dan hanya mengemas kini bahagian yang perlu dikemas kini, dengan itu meningkatkan kecekapan rendering.

Langkah 5: Bina dan Gunakan

Kini, kami telah menyelesaikan langkah asas untuk membina aplikasi sisi pelayan yang cekap dengan React dan Node.js. Seterusnya, kita perlu membina dan menggunakan.

Pertama, kami perlu membina apl React kami. Di terminal, pergi ke direktori akar projek dan laksanakan arahan berikut:

npm run build

Kemudian, kita perlu menggunakan kod pelayan ke persekitaran pengeluaran. Anda boleh memilih untuk menggunakan ia ke mana-mana pelayan yang anda biasa gunakan, sama ada pelayan awan atau pelayan tempatan.

Akhir sekali, mulakan pelayan dan akses URL pelayan dalam penyemak imbas untuk melihat kesan pemaparan cekap aplikasi React pada bahagian pelayan.

Ringkasan

Menggunakan React dan Node.js untuk membina aplikasi sisi pelayan yang cekap boleh menggabungkan keupayaan pemaparan sisi klien React dengan prestasi hebat Node.js, dengan itu meningkatkan kecekapan pemaparan dan pengalaman pengguna aplikasi. Melalui pengenalan artikel ini, kami telah mempelajari cara membina pelayan asas dan memperkenalkan komponen React, dan menggunakan kaedah penghidratan untuk mengoptimumkan pemaparan bahagian pelayan.

Sudah tentu, ini hanyalah langkah pengenalan untuk membina aplikasi sisi pelayan yang cekap dengan React dan Node.js. Dalam aplikasi sebenar, anda juga mungkin perlu mempertimbangkan beberapa faktor lain, seperti penghalaan, sambungan pangkalan data, pengesahan identiti, dsb. Saya harap artikel ini dapat membantu anda memulakan dengan cepat dengan pembangunan aplikasi sisi pelayan dengan React dan Node.js, memberikan prestasi dan pengalaman pengguna yang lebih baik untuk aplikasi anda.

Atas ialah kandungan terperinci Cara membina aplikasi sisi pelayan yang cekap menggunakan React dan Node.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!