Heim > Artikel > Web-Frontend > SSR-Funktion in Vue3: Implementierung des serverseitigen Renderings

SSR-Funktion in Vue3: Implementierung des serverseitigen Renderings

WBOYOriginal: 2023-06-18 11:01:373649Durchsuche

Mit der Popularisierung des mobilen Internets und der rasanten Entwicklung der Cloud-Computing-Technologie ist das Front-End-Framework nach und nach zur Hauptkraft der WEB-Entwicklung geworden. Neben der Bereitstellung einer praktischen Seitenstruktur, interaktiven Effekten und dynamischer Inhaltsanzeige bietet das Front-End-Framework auch die Vorteile einer schnellen Entwicklung, Wartbarkeit, Leistungsoptimierung usw., was die Entwicklungseffizienz und das Benutzererlebnis erheblich verbessert. Als beliebtes Front-End-Framework wurde Vue.js Version 3.0 offiziell veröffentlicht und bringt mehr Innovation und Optimierung. Darunter ist die Implementierung von Server Side Rendering (SSR) ein wichtiges Update in Vue3.

1. Die Definition und die Vorteile von SSR

SSR beziehen sich auf den Abschluss der Seitenrendering-Arbeit auf der Serverseite, anstatt JavaScript zum dynamischen Generieren eines DOM-Baums auf der Clientseite zu verwenden, um den Zweck einer schnellen Verbesserung der Seite zu erreichen Rendering-Geschwindigkeit und Suchmaschinenoptimierung. Die traditionelle SPA-Architektur (Single Page Application) verwendet normalerweise den clientseitigen Rendering-Modus, um Seiten durch Vue.js-Rendering auf der Clientseite anzuzeigen. Die Vorteile sind eine gute dynamische Interaktivität und eine gute Benutzererfahrung. Da die SPA die Seite jedoch erst anzeigen kann, nachdem das JavaScript heruntergeladen und analysiert wurde, kommt es zu Problemen wie langsamem Laden der Seite und unfreundlichem SEO. SSR sendet das serverseitig gerenderte HTML-Dokument an den Client, was nicht nur die Ladegeschwindigkeit und SEO optimiert, sondern auch die Vorteile einer besseren anfänglichen Rendering-Leistung, Zugänglichkeit und Social Sharing bietet.

2. SSR-Implementierung in Vue3

Vue.js bietet eine Lösung zur Unterstützung des serverseitigen Renderings in Version 2.0, um einige spezielle Anforderungsszenarien zu erfüllen. In Vue3 hat SSR eine umfassendere Unterstützung erhalten, deren Kern die createRenderer-Funktion ist. Schauen wir uns als Nächstes die SSR-Implementierung in Vue3 an.

Zugehörige Abhängigkeiten installieren

Vue3 bietet offiziell zwei Kernabhängigkeiten: @vue/server-renderer und @vue/compiler-sfc. Ersteres wird verwendet, um HTML, CSS, Skript und andere Ressourcen zu generieren und in zurückgegebene Zeichenfolgen umzuwandeln . Letzteres bietet Kompilierungs- und Analysefunktionen für .vue-Dateien und kann .vue-Dateien in Rendering-Funktionen konvertieren.

Definieren Sie die Rendering-Funktion

Vue3 empfiehlt die Verwendung der Render-Funktion anstelle der Vorlagenvorlage. Sie können die Rendering-Funktion über die Funktion createRenderer definieren. Die Funktion „createRenderer“ gibt ein Objekt zurück, das die Rendering-Funktion und andere zugehörige Informationen enthält.

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer();
const app = require('./app');

renderer.renderToString(app).then((html) => {
  console.log(html);
}).catch((err) => {
  console.error(err);
});

App ist unter anderem eine Vue-Instanz, die zuerst über die Funktion createApp initialisiert und dann im DOM-Element gemountet werden muss. Als nächstes können Sie die Rendering-Funktion verwenden, um die App zu rendern.

Router- und Containerkomponenten erstellen

Tools wie Vue-Router und Vuex müssen unter SSR verwendet werden, um die Komponenten- und Statusverwaltung entsprechend verschiedenen Routen zu unterstützen. Zuvor müssen Sie die Router- und Containerkomponenten erstellen.

const { createRouter } = require('vue-router');
const App = require('./App.vue');

const router = createRouter({
  routes: [
    { path: '/', component: App }
  ]
});

Code schreiben, um SSR zu implementieren

const express = require('express');
const { createSSRApp } = require('vue');

const server = express();
const template = `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue3 SSR</title>
    </head>
    <body>
      <!--vue-ssr-outlet-->
    </body>
  </html>
`;

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer({
  template: template
});

server.use(express.static('dist'));

server.get('*', async (req, res) => {
  const app = createSSRApp(require('./src/App.vue'));
  const router = require('./src/router').default;
  app.use(router);
  const html = await renderer.renderToString(app);
  res.send(html);
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

Wenn Sie Code schreiben, um SSR zu implementieren, müssen Sie ein Express-Projekt erstellen und die Funktion createSSRApp verwenden, um eine Vue-Instanz zu erstellen. Anschließend müssen Sie den Router, die Statusverwaltung und die Funktion createRenderer integrieren. usw. .

3. Hinweise zu SSR

Wenn Sie SSR zum Implementieren des Seitenrenderings verwenden, müssen Sie auf die folgenden Punkte achten:

Sie müssen sich auf verschiedene externe Ressourcen verlassen, einschließlich statischer Ressourcen, Datenschnittstellen, Datenbanken, Caches usw Dateispeicherung usw. Gleichzeitig bringt es auch größere Herausforderungen für Studierende im Bereich Betrieb und Wartung mit sich.
Da das serverseitige Rendern mindestens so viel Zeit erfordert wie das Rendern, wird die Leistung von SSR hauptsächlich von der Server- und Netzwerkbandbreite beeinflusst, während die Gesamtleistung des Clients keinen großen Einfluss hat.
SSR muss zum Rendern Vue-Komponenten in das String-Format konvertieren, sodass die Vue-Komponenten konvertiert und kompiliert werden müssen, was einen gewissen Verbrauch und eine gewisse Kompilierungszeit mit sich bringt.

Kurz gesagt, SSR ist eine relativ neue Technologie. Sie müssen auf die Handhabung verschiedener Probleme in Bezug auf Leistung und Verwendung achten. Sie können die technische Auswahl und die tatsächliche Verwendung entsprechend Ihren eigenen Anforderungen treffen. Insbesondere bei großen Echtzeitsystemen muss besonderes Augenmerk auf die Sicherheit, Wartbarkeit und Leistung von SSR gelegt werden.

Das obige ist der detaillierte Inhalt vonSSR-Funktion in Vue3: Implementierung des serverseitigen Renderings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript 架构 css vue.js html 前端框架 express 字符串接口 JS 对象 dom 数据库搜索引擎性能优化 SEO

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：defineAsyncComponent-Funktion in Vue3: asynchrones Laden von KomponentenNächster Artikel：defineAsyncComponent-Funktion in Vue3: asynchrones Laden von Komponenten

In Verbindung stehende Artikel

Mehr sehen