Vue3 createSSRApp()Détails de la fonction

Vue3 全局 APIVue3 API globale

createSSRApp()est une fonction spécifiquement utilisée pour le rendu côté serveur (SSR, Server-Side Rendering).

createSSRApp()En générant du contenu HTML côté serveur, elle améliore la vitesse de chargement initial de la page et les performances SEO.

etcreateApp()Comparé à,createSSRApp()elle est plus adaptée aux scénarios d'application qui nécessitent un rendu côté serveur.

1. Qu'est-ce que le rendu côté serveur (SSR) ?

Le rendu côté serveur (SSR) est le processus de génération du HTML sur le serveur, puis d'envoi du HTML généré au client pour affichage. Contrairement au rendu côté client traditionnel (CSR, Client-Side Rendering), le SSR peut aider à améliorer la vitesse de chargement initiale de la page et l'optimisation pour les moteurs de recherche (SEO).

Dans le rendu côté client, le navigateur télécharge d'abord un fichier HTML vide, puis génère dynamiquement le contenu de la page via JavaScript. Dans le rendu côté serveur, le serveur a déjà généré le contenu HTML complet, et le navigateur n'a plus qu'à afficher ce contenu.

2. createSSRApp()Le rôle de

Dans Vue.js 3,createApp()est la fonction standard pour créer des applications Vue côté client. EtcreateSSRApp()est unecreateApp()variante, spécifiquement utilisée pour créer des applications Vue qui prennent en charge le rendu côté serveur.

createSSRApp()Le rôle principal est de générer le contenu HTML de l'application Vue côté serveur et de l'envoyer au client. Il garantit la cohérence de l'application Vue côté serveur et côté client, évitant ainsi le problème de résultats de rendu incohérents entre le client et le serveur.

3. UtilisationcreateSSRApp()Créer une application

UtilisationcreateSSRApp()Les étapes de création d'une application Vue sont similaires à celles utiliséescreateApp()mais il faut prêter une attention particulière à certaines configurations liées au SSR.

3.1 Utilisation de base

Exemple

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

// Importer le composant racine
import App from './App.vue';

// Créer une application SSR
const app = createSSRApp(App);

// Monter l'application
app.mount('#app');

Dans cet exemple, nous utilisonscreateSSRApp()a créé une application Vue prenant en charge le rendu côté serveur et l'a montée sur l'élément DOM spécifié.

3.2 Différences entre le côté serveur et le côté client

Du côté serveur et du côté client,createSSRApp()le comportement est différent:

  • Côté serveur: Du côté serveur,createSSRApp()il générera le contenu HTML de l'application Vue et l'enverra au client.
  • Côté client: Du côté client,createSSRApp()il prendra en charge le contenu HTML généré par le serveur et l'activera en une application Vue interactive.

3.3 Configuration d'une application SSR

Lors de la configuration d'une application SSR, vous devez prendre en compte les points suivants:

  • Évitez d'utiliser des API spécifiques au client côté serveur: Par exemple,windowoudocumentl'objet n'est pas disponible côté serveur.
  • UtiliseronServerPrefetchhooks: Lors du rendu côté serveur, vous pouvez utiliseronServerPrefetchhooks pour précharger les données.

Exemple

export default {
  async onServerPrefetch() {
    // Précharger les données côté serveur
    this.data = await fetchData();
  }
};

4. createSSRApp()etcreateApp()Différences

Fonctionnalité createApp() createSSRApp()
Environnement de rendu Rendu côté client (CSR) Rendu côté serveur (SSR)
Vitesse de chargement initiale Plus lent, repose sur l'exécution JavaScript côté client Plus rapide, le serveur a déjà généré le HTML
SEO Médiocre, les moteurs de recherche ont du mal à explorer le contenu dynamique Meilleur, les moteurs de recherche peuvent explorer le HTML complet
Scénarios applicables Application monopage (SPA) Applications nécessitant un référencement (SEO) et un chargement rapide

Vue3 全局 APIVue3 API globale

Autres extensions