Unterstützt vue3.0 serverseitiges Rendering?

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:

schnelleres Laden des ersten Bildschirms
• : Dies ist besonders wichtig bei langsamen Netzwerkgeschwindigkeiten oder langsam laufenden Geräten. Der auf dem Server gerenderte HTML-Code muss nicht warten, bis das gesamte JavaScript heruntergeladen und ausgeführt wird, sodass Ihre Benutzer die vollständig gerenderte Seite schneller sehen , und der Datenabrufprozess wird auf der Serverseite beim ersten Besuch abgeschlossen, verglichen mit der vom Client. Get, möglicherweise eine schnellere Datenbankverbindung, was normalerweise zu höheren Kern-Webmetrikwerten, einer besseren Benutzererfahrung und für diese Anwendungen führt wobei „die Ladegeschwindigkeit des ersten Bildschirms in direktem Zusammenhang mit der Conversion-Rate steht“, kann dies von entscheidender Bedeutung sein Verwenden Sie dieselbe Sprache und dasselbe deklarative, komponentenorientierte mentale Modell, um die gesamte Anwendung zu entwickeln, ohne zwischen dem Backend-Vorlagensystem und dem Frontend-Framework hin und her zu wechseln.

  Bessere SEO: Suchmaschinen-Crawler können alles sehen gerenderte Seite direkt

• Bei der Verwendung von SSR sind auch einige Kompromisse zu berücksichtigen:
  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.

Höhere Serverlast Das Rendern einer vollständigen Anwendung in Node.js ist CPU-intensiver als nur das Hosten statischer Dateien. Wenn Sie also mit hohem Datenverkehr rechnen, sollten Sie sich auf die entsprechende Serverlast einstellen eine solide Caching-Strategie.

• Server Side Rendering (SSR) vs. Static Site Generation (SSG)
Static-Site Generation
• (Static-Site Generation, abgekürzt als SSG), auch bekannt als

  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.

SSG behält die gleiche Leistung wie SSR-Anwendungen: Es bietet eine hervorragende Leistung beim Laden des ersten Bildschirms. Gleichzeitig ist es kostengünstiger und einfacher bereitzustellen als SSR-Anwendungen, da es statisches HTML und Ressourcendateien ausgibt. Das Schlüsselwort hier ist statisch: SSG kann nur für Seiten verwendet werden, die statische Daten verbrauchen, d. h. die Daten sind während der Erstellungszeit bekannt und ändern sich über mehrere Bereitstellungen hinweg nicht. Wenn sich die Daten ändern, müssen sie erneut bereitgestellt werden.

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: &#39;<div>你已经在这花了 {{ counter }} 秒。</div>&#39;,
  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: &#39;<div id="app">你已经在这花了 {{ counter }} 秒。</div>&#39;,
      data: {
        counter: 0
      },
      created: function () {
        var vm = this
        setInterval(function () {
          vm.counter += 1
        }, 1000)
      }
    })

    // -------------------
    // 结束常用的应用代码
    // -------------------
  }
  if (typeof module !== &#39;undefined&#39; && 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(&#39;#app&#39;)</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(&#39;<div id="app"></div>&#39;, html))
    }
  )
})

// 监听5000端口
server.listen(5000, function (error) {
  if (error) throw error
  console.log(&#39;Server is running at localhost:5000&#39;)
})

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&period;</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: &#39;<li>{{ item.name }}</li>&#39;,
  props: [&#39;item&#39;],
  serverCacheKey: function (props) {
    return props.item.type + &#39;::&#39; + 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!