Wie führt man serverseitiges Rendering in Vue durch?

Vue ist ein beliebtes JavaScript-Framework, das Tools und Komponenten für die einfache Erstellung von Benutzeroberflächen bereitstellt. Da Webanwendungen immer komplexer werden, kann serverseitiges Rendering (SSR) eine bessere Leistung und Benutzererfahrung bieten. Vue 2.0 führt SSR-Unterstützung ein und ermöglicht uns die Verwendung von Vue für SSR. In diesem Artikel wird erläutert, wie Sie serverseitiges Rendering in Vue durchführen.

Was ist serverseitiges Rendering?

In einer typischen clientseitigen Rendering-Anwendung lädt der Browser HTML-Seiten und JavaScript-Dateien. Wenn ein Benutzer mit einer Anwendung interagiert, sendet JavaScript Anfragen an den Server, ruft Daten ab und aktualisiert die Seite. Dieser Ansatz kann ein großartiges Benutzererlebnis bieten, kann aber auch einige Nachteile mit sich bringen. Erstens führen Suchmaschinen-Crawler normalerweise kein JavaScript aus, was bedeutet, dass wir möglicherweise nicht alle Seiten Ihrer Anwendung einbeziehen können. Zweitens kann die anfängliche Ladezeit langsam sein, da der Browser warten muss, bis das JavaScript heruntergeladen und ausgeführt wurde, bevor er mit dem Rendern der Benutzeroberfläche beginnen kann.

Serverseitiges Rendering löst diese Probleme. Bei SSR sendet der Server beim Rendern der Seite HTML und JavaScript zusammen an den Browser. Dies bedeutet, dass Suchmaschinen die Website problemlos crawlen können und die anfänglichen Seitenladezeiten schneller sind, da der Browser nicht auf den Download von JavaScript warten muss, bevor er mit dem Rendern beginnt. Darüber hinaus kann SSR die Anwendungsleistung auf Low-End-Geräten verbessern, auf denen häufig leistungsstarke JavaScript-Engines fehlen.

Warum SSR in Vue verwenden?

Vue ist ein clientseitiges Rendering-Framework. Es nutzt virtuelles DOM und asynchrone Komponenten, um unglaublich schnelle Seitenreaktionszeiten zu ermöglichen. Da Anwendungen jedoch komplexer werden, bringt das clientseitige Rendering einige Nachteile mit sich. Zum Beispiel:

• Lange anfängliche Ladezeit: Da der Browser JavaScript-Dateien herunterladen und ausführen muss, kann die anfängliche Ladezeit Ihrer Anwendung lang sein.
• Eingeschränkte SEO-Unterstützung: Suchmaschinen führen im Allgemeinen kein JavaScript aus, was bedeutet, dass wir möglicherweise nicht alle Seiten indizieren können.
• Nicht gut für Low-End-Geräte: Einige Low-End-Geräte sind möglicherweise nicht in der Lage, große Mengen an JavaScript zu verarbeiten, was dazu führt, dass die App langsam wird oder abstürzt.
• Nicht gut für Crawler: Da Suchmaschinen kein JavaScript ausführen können, können wir Crawler möglicherweise nicht dazu bringen, unsere Seiten korrekt zu indizieren.

SSR kann die oben genannten Probleme lösen und eine bessere Leistung und Benutzererfahrung bieten. Daher bietet Vue SSR-Unterstützung, sodass wir Vue-Anwendungen auf der Serverseite rendern können.

Schritte zur Durchführung von SSR in Vue

Die Durchführung von SSR in Vue ist in die folgenden Schritte unterteilt:

1. Erstellen Sie eine Vue-Anwendungsinstanz.
2. Erstellen und konfigurieren Sie einen Server (Node.js).
3. Konfigurieren des Servers für die Verarbeitung unserer Vue-Anwendung.
4. Erstellen Sie eine Route zur Verarbeitung unseres Seitenpfads.
5. Rendern unserer Vue-Anwendung auf dem Server.

Jetzt schauen wir uns jeden Schritt Schritt für Schritt an, um SSR besser zu verstehen.

Schritt 1: Erstellen Sie eine Vue-Anwendungsinstanz

Zuerst müssen wir eine Vue-Instanz erstellen und die Vorlage der Anwendung definieren. Beim clientseitigen Rendern definieren wir normalerweise die Vorlage der Anwendung in der Datei index.html. Aber in SSR müssen wir es auf der Serverseite erstellen. Hier ist ein einfaches Beispiel:

// app.js
import Vue from 'vue';
import App from './App.vue';

export function createApp() {
  return new Vue({
    render: h => h(App)
  });
}

Der obige Code exportiert eine Funktion namens createApp, die eine neue Vue-Instanz erstellt und zurückgibt. In diesem Beispiel wird unsere Stammkomponente App.vue zum Rendern der Anwendung verwendet. createApp 的函数，该函数创建并返回一个新的 Vue 实例。这个实例使用我们的根组件 App.vue 来渲染应用程序。

步骤2：创建和配置一个服务器

在步骤1中，我们创建了一个可以用于在服务器端渲染我们的 Vue 应用程序的 Vue 实例。现在，我们需要创建一个服务器来运行这个实例。我们使用 Node.js 来创建服务器。

以下是我们可以使用的基本服务器模板：

// server.js
const express = require('express');
const app = express();

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码创建了一个简单的 Express 服务器，并让它监听本地端口 3000。这个服务器还可以使用 express.static 中间件来提供静态文件访问支持。

步骤3：配置服务器以处理我们的 Vue 应用程序

我们已经创建了服务器，现在需要配置服务器以处理我们的 Vue 应用程序。为此，我们需要使用 vue-server-renderer 依赖项。下面是完整的代码示例：

// server.js
const express = require('express');
const app = express();

// Include the Vue SSR renderer.
const renderer = require('vue-server-renderer').createRenderer();

// Import the createApp function from app.js.
const { createApp } = require('./app');

// The port number to use.
const PORT = process.env.PORT || 3000;

// Serve static assets.
app.use(express.static('public'));

// Handle all GET requests.
app.get('*', (req, res) => {
  // Create a new Vue app instance.
  const app = createApp();

  // Render the Vue app to a string.
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error');
      return;
    }

    // Send the HTML response to the client.
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <title>Vue SSR App</title>
        </head>
        <body>
          ${html}
        </body>
      </html>
    `);
  });
});

// Start the server.
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

上面的代码创建了一个完整的 Express 服务器，将请求和 Vue 实例关联起来，并使用 vue-server-renderer 包的 renderToString

Schritt 2: Erstellen und konfigurieren Sie einen Server

In Schritt 1 haben wir eine Vue-Instanz erstellt, die zum serverseitigen Rendern unserer Vue-Anwendung verwendet werden kann. Jetzt müssen wir einen Server erstellen, um diese Instanz auszuführen. Wir verwenden Node.js, um den Server zu erstellen.

Hier ist eine grundlegende Servervorlage, die wir verwenden können:

// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h => h(App)
  });
}

Der obige Code erstellt einen einfachen Express-Server und lässt ihn den lokalen Port 3000 überwachen. Dieser Server kann mithilfe der Middleware express.static auch Unterstützung für den statischen Dateizugriff bereitstellen. 🎜🎜Schritt 3: Konfigurieren Sie den Server für die Verarbeitung unserer Vue-Anwendung. 🎜🎜Wir haben den Server erstellt. Jetzt müssen wir den Server für die Verarbeitung unserer Vue-Anwendung konfigurieren. Dazu müssen wir die Abhängigkeit vue-server-renderer verwenden. Hier ist das vollständige Codebeispiel: 🎜

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}

🎜Der obige Code erstellt einen vollständigen Express-Server, ordnet die Anfrage der Vue-Instanz zu und verwendet den renderToStringvue-server-renderer-Pakets. Die Methode code> rendert die Vue-Anwendung in HTML. 🎜🎜Schritt 4: Erstellen Sie eine Route 🎜🎜Wir sind jetzt in der Lage, unsere Vue-Anwendung serverseitig zu rendern. Jetzt müssen wir eine Route erstellen, die unseren Seitenpfad mit der serverseitigen Route verknüpft. Wir verwenden Vue Router, um Routen zu erstellen. 🎜🎜Hier ist ein einfaches Beispiel:🎜

// app.js
import Vue from 'vue';
import App from './App.vue';
import { createRouter } from './router';

export function createApp() {
  const router = createRouter();

  return new Vue({
    router,
    render: h => h(App)
  });
}

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export function createRouter() {
  return new Router({
    mode: 'history',
    routes: [
      { path: '/', component: Home },
      { path: '/about', component: About }
    ]
  });
}

上面的代码分别在 app.js 和 router.js 文件中定义了我们的路由。在 app.js 文件中，我们创建了一个新的 Vue 实例并将路由器与其关联。在 router.js 文件中，我们使用 createRouter 函数来导出一个新的路由实例。

步骤5：在服务器中渲染我们的 Vue 应用程序

我们已经准备好工作了，现在需要在服务器中渲染我们的 Vue 应用程序。我们将使用步骤3中的代码，其中渲染器将 Vue 应用程序渲染为 HTML，最后将其发送回客户端。

现在让我们建立应用程序本身的代码。以下是我们简单的应用程序：

<!-- App.vue -->
<template>
  <div>
    <h1>{{ message }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

在上面的组件中，我们定义了一个带有文本消息的标题。我们还使用 Vue Router 将组件关联到应用程序路径。

最后，在服务器上启动我们的应用程序。使用以下命令：

node server.js

现在，在浏览器中导航到 http://localhost:3000 应该显示我们的 Vue 应用程序。客户端和服务器端路由都应该正常工作。

结论

在本文中，我们了解了服务器端渲染 (SSR) 的概念。我们还了解了在 Vue 中执行服务器端渲染的步骤。我们了解了为什么在 Vue 中使用 SSR 很重要，以及如何使用 Node.js 和 vue-server-renderer 执行服务器端渲染。现在，你应该能够为你的下一个 Vue 应用程序使用 SSR 来提供更好的性能和用户体验。

Das obige ist der detaillierte Inhalt vonWie führt man serverseitiges Rendering in Vue durch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!