Vue3 createSSRApp()Funktionsdetails

Vue3 全局 APIVue3 Global API

createSSRApp()ist eine Funktion, die speziell für serverseitiges Rendering (SSR, Server-Side Rendering) verwendet wird.

createSSRApp()Durch die Erzeugung von HTML-Inhalten auf der Serverseite verbessert sie die anfängliche Ladegeschwindigkeit der Seite und die SEO-Leistung.

undcreateApp()Im Vergleich zu,createSSRApp()sie eignet sich besser für Anwendungsszenarien, die serverseitiges Rendering erfordern.

1. Was ist serverseitiges Rendering (SSR)?

Serverseitiges Rendering (SSR) ist der Prozess, bei dem HTML auf dem Server generiert und dann das generierte HTML zur Anzeige an den Client gesendet wird. Im Gegensatz zum traditionellen clientseitigen Rendering (CSR, Client-Side Rendering) kann SSR helfen, die anfängliche Ladegeschwindigkeit der Seite zu verbessern und die Suchmaschinenoptimierung (SEO) zu verbessern.

Beim clientseitigen Rendering lädt der Browser zuerst eine leere HTML-Datei herunter und generiert dann den Seiteninhalt dynamisch über JavaScript. Beim serverseitigen Rendering hat der Server bereits den vollständigen HTML-Inhalt generiert, und der Browser muss diesen Inhalt nur noch anzeigen.

2. createSSRApp()Die Rolle von

In Vue.js 3,createApp()ist die Standardfunktion zum Erstellen clientseitiger Vue-Anwendungen. UndcreateSSRApp()ist eincreateApp()Variante, die speziell zum Erstellen von Vue-Anwendungen verwendet wird, die serverseitiges Rendering unterstützen.

createSSRApp()Die Hauptaufgabe besteht darin, den HTML-Inhalt der Vue-Anwendung auf der Serverseite zu generieren und an den Client zu senden. Sie stellt die Konsistenz der Vue-Anwendung auf der Server- und der Clientseite sicher und vermeidet dadurch das Problem inkonsistenter Rendering-Ergebnisse zwischen Client und Server.

3. VerwendungcreateSSRApp()Eine Anwendung erstellen

VerwendungcreateSSRApp()Die Schritte zum Erstellen einer Vue-Anwendung ähneln der Verwendung voncreateApp()aber besonderes Augenmerk muss auf einige SSR-bezogene Konfigurationen gelegt werden.

3.1 Grundlegende Verwendung

Beispiel

// createSSRApp importieren
import { createSSRApp } from 'vue';

// Die Root-Komponente importieren
import App from './App.vue';

// Eine SSR-Anwendung erstellen
const app = createSSRApp(App);

// Die Anwendung mounten
app.mount('#app');

In diesem Beispiel verwenden wircreateSSRApp()erstellte eine Vue-Anwendung, die serverseitiges Rendering unterstützt, und montierte sie an das angegebene DOM-Element.

3.2 Unterschiede zwischen Server- und Clientseite

Auf der Server- und der Clientseite,createSSRApp()das Verhalten ist unterschiedlich:

  • Serverseite: Auf der Serverseite,createSSRApp()wird sie den HTML-Inhalt der Vue-Anwendung generieren und an den Client senden.
  • Clientseite: Auf der Clientseite,createSSRApp()übernimmt sie den vom Server generierten HTML-Inhalt und aktiviert ihn zu einer interaktiven Vue-Anwendung.

3.3 Konfigurieren einer SSR-Anwendung

Beim Konfigurieren einer SSR-Anwendung müssen Sie die folgenden Punkte beachten:

  • Vermeiden Sie die Verwendung clientspezifischer APIs auf der Serverseite: Zum Beispiel,windowoderdocumentdas Objekt ist auf der Serverseite nicht verfügbar.
  • Verwenden SieonServerPrefetchhooks: Beim Rendern auf der Serverseite kannst duonServerPrefetchhooks verwenden, um Daten vorab abzurufen.

Beispiel

export default {
  async onServerPrefetch() {
    // Daten auf der Serverseite vorab abrufen
    this.data = await fetchData();
  }
};

4. createSSRApp()undcreateApp()Unterschiede

Merkmal createApp() createSSRApp()
Rendering-Umgebung Clientseitiges Rendering (CSR) Serverseitiges Rendering (SSR)
Initiale Ladegeschwindigkeit Langsamer, ist auf clientseitige JavaScript-Ausführung angewiesen Schneller, der Server hat das HTML bereits generiert
SEO Schlecht, Suchmaschinen haben Schwierigkeiten, dynamische Inhalte zu crawlen Besser, Suchmaschinen können das vollständige HTML crawlen
Geeignete Szenarien Single-Page-Anwendung (SPA) Anwendungen, die SEO und schnelles Laden erfordern

Vue3 全局 APIVue3 Global API

Andere Erweiterungen