So erstellen Sie effiziente serverseitige Anwendungen mit React und Node.js

Wie man mit React und Node.js effiziente serverseitige Anwendungen erstellt

In den letzten Jahren haben sich React und Node.js zu sehr beliebten Technologien im Bereich der Front-End-Entwicklung entwickelt. React ist ein effizientes Front-End-Framework, das uns beim Aufbau interaktiver Benutzeroberflächen helfen kann, während Node.js eine ereignisgesteuerte Entwicklungsplattform ist, mit der sich problemlos effiziente serverseitige Anwendungen erstellen lassen. Durch die Kombination von React und Node.js können wir effizientere und leistungsfähigere serverseitige Anwendungen erstellen.

In diesem Artikel untersuchen wir, wie man mit React und Node.js effiziente serverseitige Anwendungen erstellt, und stellen einige spezifische Codebeispiele bereit.

Schritt 1: Erstellen Sie die Projektstruktur

Zuerst müssen wir ein neues Projekt erstellen, um eine serverseitige Anwendung zu erstellen. Sie können jedes Ihnen vertraute Projekterstellungstool verwenden, z. B. Create React App oder Webpack.

Erstellen Sie einen neuen Ordner im Stammverzeichnis des Projekts und nennen Sie ihn „Server“. Erstellen Sie im Serverordner eine neue Datei mit dem Namen index.js als Eingabedatei für unseren serverseitigen Code.

Schritt 2: Erstellen Sie einen Basisserver

In der Datei index.js müssen wir einige notwendige Module importieren, um unseren Basisserver zu erstellen. Mit Express.js können wir schnell einen einfachen Server erstellen.

Zuerst müssen wir Express.js installieren. Gehen Sie im Terminal in den Serverordner und führen Sie den folgenden Befehl aus:

npm install express

Anschließend importieren Sie in die Datei index.js die erforderlichen Module:

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

Dieser Code erstellt einen einfachen Express-Server und auf der Root-Route einen einfachen Text Antwort wurde zurückgegeben. Sie können die Ergebnisse anzeigen, indem Sie http://localhost:3000 in Ihrem Browser aufrufen.

Schritt 3: React-Komponenten einführen

Da wir nun einen Basisserver haben, werden wir React-Komponenten einführen und sie auf dem Server rendern.

Zuerst müssen wir React und ReactDOM installieren. Gehen Sie im Terminal in das Stammverzeichnis des Projekts und führen Sie den folgenden Befehl aus:

npm install react react-dom

Importieren Sie dann in die Datei index.js die erforderlichen Module:

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

In diesem Code führen wir die App-Komponente ein und verwenden ReactDOMServer. Der renderToString -Methode rendert es als HTML-String. Anschließend senden wir diesen HTML-String an den Browser, damit er vom Server gerendert werden kann.

Schritt 4: Serverseitiges Rendering optimieren

Im vorherigen Schritt haben wir die React-Komponente erfolgreich auf dem Server gerendert. Ein solches serverseitiges Rendering ist jedoch nicht ideal, da es die clientseitigen Rendering-Funktionen von React nicht nutzt.

Um das serverseitige Rendering zu optimieren, können wir die Hydratationsmethode von React verwenden. Im Browser verwenden wir die Methode ReactDOM.render, um die Komponente im DOM zu rendern und vergleichen sie dabei mit dem serverseitig gerenderten HTML.

In der Datei index.js müssen wir einige Änderungen am serverseitigen Rendering-Code vornehmen:

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

Im obigen Code haben wir dem serverseitig generierten HTML eine JavaScript-Datei hinzugefügt, die für das clientseitige Rendering erforderlich ist Code-Link. Auf diese Weise vergleicht React im Browser die auf der Serverseite gerenderte HTML-Struktur mit dem auf der Clientseite gerenderten JavaScript-Code und aktualisiert nur die Teile, die aktualisiert werden müssen, wodurch die Rendereffizienz verbessert wird.

Schritt 5: Erstellen und Bereitstellen

Jetzt haben wir die grundlegenden Schritte zum Erstellen einer effizienten serverseitigen Anwendung mit React und Node.js abgeschlossen. Als nächstes müssen wir erstellen und bereitstellen.

Zuerst müssen wir unsere React-App erstellen. Gehen Sie im Terminal zum Stammverzeichnis des Projekts und führen Sie den folgenden Befehl aus:

npm run build

Anschließend müssen wir den Servercode in der Produktionsumgebung bereitstellen. Sie können es auf jedem Server bereitstellen, mit dem Sie vertraut sind, unabhängig davon, ob es sich um einen Cloud-Server oder einen lokalen Server handelt.

Starten Sie abschließend den Server und greifen Sie im Browser auf die Server-URL zu, um den effizienten Rendering-Effekt der React-Anwendung auf der Serverseite zu sehen.

Zusammenfassung

Durch die Verwendung von React und Node.js zum Erstellen effizienter serverseitiger Anwendungen können die clientseitigen Rendering-Funktionen von React mit der leistungsstarken Leistung von Node.js kombiniert werden, wodurch die Rendering-Effizienz und das Benutzererlebnis der Anwendung verbessert werden. Durch die Einführung dieses Artikels haben wir gelernt, wie man einen Basisserver erstellt, React-Komponenten einführt und die Hydratationsmethode verwendet, um das serverseitige Rendering zu optimieren.

Natürlich sind dies nur die Einführungsschritte zum Erstellen effizienter serverseitiger Anwendungen mit React und Node.js. In tatsächlichen Anwendungen müssen Sie möglicherweise auch andere Faktoren berücksichtigen, z. B. Routing, Datenbankverbindung, Identitätsauthentifizierung usw. Ich hoffe, dieser Artikel kann Ihnen dabei helfen, schnell mit der serverseitigen Anwendungsentwicklung mit React und Node.js zu beginnen und eine bessere Leistung und Benutzererfahrung für Ihre Anwendung zu erzielen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie effiziente serverseitige Anwendungen mit React und Node.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!