vue3.0 unterstützt serverseitiges Rendering. Vue unterstützt das direkte Rendern von Komponenten in HTML-Strings auf der Serverseite, die Rückgabe an den Browser als serverseitige Antwort und schließlich die „Aktivierung“ (Hydratierung) des statischen HTML auf der Browserseite in einer interaktiven Clientanwendung. Eine vom Server gerenderte Vue-Anwendung kann als „isomorph“ oder „universal“ betrachtet werden, da der Großteil des Anwendungscodes sowohl auf dem Server als auch auf dem Client ausgeführt wird. Vorteile von Vue mit serverseitigem Rendering: Schnelleres Laden des ersten Bildschirms, einheitliches mentales Modell, besser SEO.
Die Betriebsumgebung dieses Tutorials: Windows7-System, DELL G3-Computer
Vue unterstützt standardmäßig serverseitiges Rendering (SSR). Die Aufgabe der Vue-Komponenten besteht darin, DOM im Browser zu generieren und zu bearbeiten. Vue unterstützt jedoch auch das direkte Rendern von Komponenten in HTML-Strings
Eine vom Server gerenderte Vue.js-Anwendung kann auch als „isomorph“ (Isomorph) oder „Universal“ (Universal) betrachtet werden, da der Großteil des Anwendungscodes auf beiden Servern ausgeführt wird und dem Client. Warum serverseitiges Rendering (SSR) verwenden?Einseitiges Rendering mit dem Client Im Vergleich zu SPA sind die Hauptvorteile von SSR:
Bessere SEO: Suchmaschinen-Crawler können alles sehen gerenderte Seite direkt
Einschränkungen in der Entwicklung können nur in bestimmten Lebenszyklus-Hooks verwendet werden Zur Verwendung in serverseitig gerenderten Anwendungen.
Mehr Anforderungen im Zusammenhang mit der Build-Konfiguration und Bereitstellung erfordern eine Umgebung, die die Ausführung des Node.js-Servers ermöglicht auf jedem statischen Dateiserver bereitgestellt werden.
Pre-Rendering
, ist eine weitere beliebte Technik zum Erstellen schneller Websites. Wenn die zum serverseitigen Rendern einer Seite erforderlichen Daten für jeden Benutzer gleich sind, können wir sie nur einmal rendern und dies vorab während des Erstellungsprozesses tun, anstatt die Seite jedes Mal neu zu rendern, wenn eine Anfrage eingeht. Vorgerenderte Seiten werden generiert und als statische HTML-Dateien auf dem Server gehostet.Wenn Sie SSR nur zur Optimierung der SEO einiger Marketingseiten (z. B. /, /about und /contact usw.) untersuchen, benötigen Sie möglicherweise SSG anstelle von SSR. SSG eignet sich auch hervorragend zum Erstellen inhaltsbasierter Websites wie Dokumentationsseiten oder Blogs. Tatsächlich wurde die Website, die Sie gerade lesen, statisch mit VitePress generiert, einem statischen Site-Generator von Vue.
Hallo Welt
Machen Sie sich bereit, serverseitiges Rendering in Aktion zu erleben. Serverseitiges Rendering (d. h. SSR) klingt kompliziert, aber ein einfaches Node-Skript kann diese Funktion in nur 3 Schritten erreichen:
// 步骤 1:创建一个Vue实例
var Vue = require('vue')
var app = new Vue({
render: function (h) {
return h('p', 'hello world')
}
})
// 步骤 2: 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 步骤 3: 将 Vue实例 渲染成 HTML
renderer.renderToString(app, function (error, html) {
if (error) throw error
console.log(html)
// => <p server-rendered="true">hello world</p>
})Es ist nicht schwierig. Natürlich ist dieses Beispiel einfacher als die meisten Anwendungen, um zu untersuchen, wie diese Funktionen funktionieren
Einfaches serverseitiges Rendering über den Express-Webserver
Ohne einen Webserver ist es schwierig, serverseitiges Rendering zu sagen, also lassen Sie uns sagen Mach es, fülle es auf. Wir werden eine sehr einfache serverseitige Rendering-Anwendung erstellen, die nur ES5 und keine anderen Build-Schritte oder Vue-Plugins verwendet.
Starten Sie eine App, die Benutzern mitteilt, wie viel Zeit sie auf einer Seite verbracht haben.
new Vue({
template: '<div>你已经在这花了 {{ counter }} 秒。</div>',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})Um uns an das serverseitige Rendering anzupassen, müssen wir einige Änderungen vornehmen, damit es im Browser und Knoten gerendert werden kann:
Fügen Sie im Browser unsere Anwendungsinstanz zum globalen Kontext (Fenster) hinzu. , wir Es kann installiert werden.
In Node können wir durch den Export einer Factory-Funktion Anwendungsinstanzen für jede Anfrage erstellen.
Um dies umzusetzen, wird eine kleine Vorlage benötigt:
// assets/app.js
(function () { 'use strict'
var createApp = function () {
// ---------------------
// 开始常用的应用代码
// ---------------------
// 主要的Vue实例必须返回，并且有一个根节点在id "app"上，这样客户端可以加载它。
return new Vue({
template: '<div id="app">你已经在这花了 {{ counter }} 秒。</div>',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})
// -------------------
// 结束常用的应用代码
// -------------------
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = createApp
} else {
this.app = createApp()
}
}).call(this)Da wir nun den Anwendungscode haben, fügen wir eine HTML-Datei hinzu.
<!-- index.html --> <!DOCTYPE html> <html> <head> <title>My Vue App</title> <script src="/assets/vue.js"></script> </head> <body> <div id="app"></div> <script src="/assets/app.js"></script> <script>app.$mount('#app')</script> </body> </html>
Beziehen Sie sich hauptsächlich auf die Dateien app.js und vue.js, die wir zuvor im Assets-Ordner erstellt haben. Wir haben eine Single-Page-Anwendung, die ausgeführt werden kann
Um dann serverseitiges Rendering zu implementieren, müssen wir eine hinzufügen Schritt auf der Serverseite.
// server.js
'use strict'
var fs = require('fs')
var path = require('path')
// 定义全局的Vue为了服务端的app.js
global.Vue = require('vue')
// 获取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')
// 创建一个渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 创建一个Express服务器
var express = require('express')
var server = express()
// 部署静态文件夹为 "assets"文件夹
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
// 处理所有的Get请求
server.get('*', function (request, response) {
// 渲染我们的Vue应用为一个字符串
renderer.renderToString(
// 创建一个应用实例
require('./assets/app')(),
// 处理渲染结果
function (error, html) {
// 如果渲染时发生了错误
if (error) {
// 打印错误到控制台
console.error(error)
// 告诉客户端错误
return response
.status(500)
.send('Server Error')
}
// 发送布局和HTML文件
response.send(layout.replace('<div id="app"></div>', html))
}
)
})
// 监听5000端口
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:5000')
})Das ist es. Das gesamte Beispiel, klonen Sie es für ein ausführliches Experiment. Sobald es lokal ausgeführt wird, können Sie bestätigen, dass der vom Renderer ausgewählte Dienst tatsächlich ausgeführt wird, indem Sie mit der rechten Maustaste auf die Seite klicken und Seitenressourcen (oder ähnliches) auswählen. Im Text zu sehen:
<div id="app" server-rendered="true">You have been here for 0 seconds.</div>
statt:
<div id="app"></div>
Streaming-Antwort
Vue unterstützt auch Streaming-Rendering, wobei Webserver bevorzugt werden, die Streaming unterstützen. Ermöglicht das allgemeine Generieren und Schreiben von HTML in den entsprechenden Stream, anstatt alles auf einmal zu schreiben. Das Ergebnis ist, dass Anfragen schneller und ohne Nachteile bearbeitet werden!
Um den Anwendungscode im vorherigen Abschnitt für das Streaming-Rendering geeignet zu machen, können Sie server.get('*',...) einfach durch den folgenden Code ersetzen:
// 拆分布局成两段HTML
var layoutSections = layout.split('<div id="app"></div>')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]
// 处理所有的Get请求
server.get('*', function (request, response) {
// 渲染我们的Vue实例作为流
var stream = renderer.renderToStream(require('./assets/app')())
// 将预先的HTML写入响应
response.write(preAppHTML)
// 每当新的块被渲染
stream.on('data', function (chunk) {
// 将块写入响应
response.write(chunk)
})
// 当所有的块被渲染完成
stream.on('end', function () {
// 将post-app HTML写入响应
response.end(postAppHTML)
})
// 当渲染时发生错误
stream.on('error', function (error) {
// 打印错误到控制台
console.error(error)
// 告诉客服端发生了错误
return response
.status(500)
.send('Server Error')
})
})Das ist nicht komplizierter als das vorherige Version, und es könnte sogar für Sie funktionieren. Es ist nicht einmal ein neues Konzept. Wir haben Folgendes getan:
Den Ablauf aufbauen
HTML schreiben, bevor die Antwort angewendet wird
Den anzuwendenden HTML-Code auf die Antwort schreiben, sofern verfügbar
HTML am Ende der Antwort schreiben
Verarbeitung Eventuelle Fehler
Komponenten-Caching
Vues serverseitiges Rendering ist standardmäßig sehr schnell, aber Sie können die Leistung weiter verbessern, indem Sie gerenderte Komponenten zwischenspeichern. Dies gilt als erweiterte Funktion. Wenn jedoch die falsche Komponente zwischengespeichert wird (oder die richtige Komponente den falschen Inhalt hat), führt dies dazu, dass die App falsch gerendert wird. Besonderer Hinweis:
Komponenten, die Unterkomponenten enthalten, die vom globalen Status abhängen (z. B. Status von Vuex), sollten nicht zwischengespeichert werden. Wenn Sie dies tun, wird auch die Unterkomponente (eigentlich der gesamte Unterbaum) zwischengespeichert. Achten Sie daher besonders auf Situationen mit Slot-Fragmenten oder Unterkomponenten.
Einstellungen
Außerhalb von Warnsituationen können wir Komponenten mit der folgenden Methode zwischenspeichern.
Zunächst müssen Sie dem Renderer ein Cache-Objekt bereitstellen. Hier ist ein einfaches Beispiel mit lru-cache
var createRenderer = require('vue-server-renderer').createRenderer
var lru = require('lru-cache')
var renderer = createRenderer({
cache: lru(1000)
}), das bis zu 1000 unabhängige Renderings zwischenspeichert. Weitere Informationen zur Konfiguration des Zwischenspeicherns in Inhalten finden Sie unter lru-cache-Einstellungen
Anschließend können Sie für die Komponenten, die Sie zwischenspeichern möchten, Folgendes angeben:
einen eindeutigen Namen
eine serverCacheKey-Funktion, die A eindeutig zurückgibt Komponentenumfang
Beispiel:
Vue.component({
name: 'list-item',
template: '<li>{{ item.name }}</li>',
props: ['item'],
serverCacheKey: function (props) {
return props.item.type + '::' + props.item.id
}
})Ideale Komponente zum Caching
Jede reine Komponente kann sicher zwischengespeichert werden – dies soll sicherstellen, dass die Weitergabe derselben Daten an jede Komponente denselben HTML-Code erzeugt. Beispiele für diese Szenarien sind:
Statische Komponenten (versuchen Sie z. B. immer dasselbe HTML, damit die serverCacheKey-Funktion als „true“ zurückgegeben werden kann)
Listenkomponenten (bei großen Listen kann deren Zwischenspeicherung die Leistung verbessern)
Gemeinsame UI-Komponenten (wie Schaltflächen, Warnungen usw. – zumindest erhalten sie Daten über Requisiten statt über Slots oder Unterkomponenten)
Erklärung:
Jetzt sollten Sie die Grundkonzepte hinter der Serverseite verstehen Rendern. Der Build-Prozess, das Routing und Vuex haben jedoch jeweils ihre eigenen Überlegungen.
(Teilen von Lernvideos: Vuejs-Einführungs-Tutorial, Grundlegendes Programmiervideo)
Das obige ist der detaillierte Inhalt vonUnterstützt vue3.0 serverseitiges Rendering?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
