Detaillierte Erläuterung der SSR-Funktion in Vue3: Implementierung des serverseitigen Renderings-View.js-php.cn

Detaillierte Erläuterung der SSR-Funktion in Vue3: Implementierung des serverseitigen Renderings

WBOY

Freigeben： 2023-06-18 09:04:08

Original

5567 Leute haben es durchsucht

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie versuchen immer mehr Websites, serverseitiges Rendering (SSR) zu verwenden, um die Seitenreaktionsgeschwindigkeit zu beschleunigen und SEO-Effekte zu verbessern. Als eines der derzeit beliebtesten Front-End-Frameworks bietet Vue3 in seiner neuesten Version auch vollständige Unterstützung für SSR. Dieser Artikel bietet eine detaillierte Analyse und Erklärung der SSR-Funktion in Vue3.

1. Was ist SSR?

Bevor wir die SSR-Funktion in Vue3 offiziell einführen, müssen wir zunächst verstehen, was serverseitiges Rendering (SSR) ist. Einfach ausgedrückt rendert SSR die Vue-Komponente serverseitig in einen HTML-String und sendet den HTML-String dann zur Anzeige an den Browser. Im Vergleich zur herkömmlichen CSR-Methode (Client-Side Rendering) kann SSR die Geschwindigkeit des First-Screen-Renderings erhöhen, SEO-Effekte und Benutzererfahrung verbessern.

2. SSR-Funktionen in Vue3

Vue3 bietet eine Reihe von Funktionen für SSR, einschließlich createSSRApp, createRenderer und renderToString.

createSSRApp

createSSRApp ist eine Funktion in Vue3, die speziell zum Erstellen von SSR-Anwendungen verwendet wird. Der Unterschied zu createApp besteht darin, dass diese Funktion eine Anwendungsinstanz relativ zum Server zurückgibt. Beim Erstellen dieser Anwendungsinstanz müssen Sie ein sogenanntes Kontextkontextobjekt einführen. Dieses Objekt enthält Inhalte im Zusammenhang mit dem Rendern, z. B. Seiten-URL und Anforderung Überschriften usw.

createRenderer

createRenderer ist eine Funktion zum Erstellen eines Renderers und kann einen Parameter akzeptieren, bei dem es sich um ein RenderOptions-Objekt handelt. Dieses Objekt kapselt die relevante Konfiguration des Renderers, z. B. die Übergabe der Anwendungsinstanz hier zum Starten, den jeweiligen Umgang mit verschiedenen VNode-Typen usw.

renderToString

renderToString ist die Renderfunktion, die dieser SSR-Anwendung entspricht. Diese Funktion akzeptiert nur eine Vue-Anwendungsinstanz als Parameter. Wenn Sie mehrere Anwendungsinstanzen rendern möchten, müssen Sie diese nacheinander aufrufen. Der Rückgabewert dieser Funktion ist die gerenderte Ergebniszeichenfolge.

3. Implementieren Sie serverseitiges Rendering

Die oben genannten drei Funktionen sind die Kernfunktionen, die zur Unterstützung von SSR in Vue3 verwendet werden. Als nächstes zeigen wir anhand eines einfachen Beispiels, wie Sie sie zur Implementierung von serverseitigem Rendering verwenden.

Wir gehen davon aus, dass wir eine einfache Vue-Komponente wie folgt haben:

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue3 SSR!'
    }
  }
}
</script>

Nach dem Login kopieren

Wir müssen zuerst die Eintragsdatei ändern und die Funktion createSSRApp verwenden, um unsere Anwendungsinstanz zu erstellen:

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  return { app }
}

Nach dem Login kopieren

Dann müssen wir einen Renderer erstellen, um die Vue-Instanz zu rendern ：

import { createRenderer } from 'vue'
import { createMemoryHistory, createRouter, RouterView } from 'vue-router'
import { renderToString } from '@vue/server-renderer'
import { createApp } from './main'

const renderer = createRenderer({
  history: createMemoryHistory(),
  renderOptions: {
    head: `
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
    `
  }
})

const router = createRouter({
  history: createMemoryHistory(),
  routes: [{ path: '/', component: RouterView }]
})

async function render() {
  const { app } = await createApp()
  const html = await renderer.renderToString(router)
  return `<html><body>${html}</body></html>`
}

Nach dem Login kopieren

Wir haben die Funktion createRenderer in vue-server-renderer eingeführt und eine Router-Instanz erstellt. Als nächstes müssen wir die Daten in der App.vue-Datei vorab ausfüllen, um sicherzustellen, dass die vom Server gerenderten HTML-String-Daten mit denen beim Rendern durch den Client identisch sind. Wir können die zuvor gerenderten Ergebnisse auf die Seite schreiben, wenn wir eine Anfrage auf der Serverseite stellen, und sie dann zum Rendern an den Client übergeben.

import { createSSRApp } from 'vue'
import App from './App.vue'

export function createApp() {
  const app = createSSRApp(App)
  const initialState = window.__INITIAL_STATE__
  if (initialState) {
    app.$data = initialState
  }
  return { app }
}

Nach dem Login kopieren

Schließlich geben wir den gerenderten HTML-String an den Client zurück.

import express from 'express'
import { render } from './server'

const app = express()

app.get('*', async (req, res) => {
  const html = await render(req.url)
  res.send(html)
})

const PORT = 3000
app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`)
})

Nach dem Login kopieren

Das Obige ist ein einfaches Implementierungsbeispiel für das serverseitige Rendering von Vue3.

4. Zusammenfassung

Dieser Artikel stellt die SSR-Funktionen in Vue3 vor und zeigt anhand eines einfachen Beispiels, wie diese Funktionen zur Implementierung des serverseitigen Renderings verwendet werden. Ich glaube, dass die Leser durch die Einleitung dieses Artikels bereits ein klareres Verständnis der SSR-Funktionen in Vue3 erlangen und diese zur Implementierung ihrer eigenen serverseitigen Rendering-Anwendungen verwenden können.

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