Maison > Article > interface Web > Explication détaillée de la fonction SSR dans Vue3 : implémentation du rendu côté serveur

Explication détaillée de la fonction SSR dans Vue3 : implémentation du rendu côté serveur

WBOYoriginal: 2023-06-18 09:04:085557parcourir

Avec le développement continu de la technologie front-end, de plus en plus de sites Web commencent à essayer d'utiliser le rendu côté serveur (SSR) pour accélérer la vitesse de réponse des pages et améliorer les effets de référencement. En tant que l'un des frameworks front-end les plus populaires à l'heure actuelle, Vue3 a également ajouté une prise en charge complète de SSR dans sa dernière version. Cet article fournira une analyse et une explication détaillées de la fonction SSR dans Vue3.

1. Qu'est-ce que la RSS ?

Avant d'introduire formellement la fonction SSR dans Vue3, nous devons d'abord comprendre ce qu'est le rendu côté serveur (SSR). En termes simples, SSR restitue le composant Vue dans une chaîne HTML côté serveur, puis envoie la chaîne HTML au navigateur pour affichage. Par rapport à la méthode traditionnelle de rendu côté client (CSR), SSR peut augmenter la vitesse de rendu sur le premier écran, améliorer les effets de référencement et l'expérience utilisateur.

2. Fonctions SSR dans Vue3

Vue3 fournit un ensemble de fonctions pour SSR, notamment createSSRApp, createRenderer et renderToString.

createSSRApp

createSSRApp est une fonction de Vue3 spécifiquement utilisée pour créer des applications SSR. La différence avec createApp est que cette fonction renvoie une instance d'application par rapport au serveur, et lors de la création de cette instance d'application, vous devez introduire un objet de contexte dit contextuel. Cet objet contient du contenu lié au rendu, tel qu'une URL de page, une demande. en-têtes, etc.

createRenderer

createRenderer est une fonction utilisée pour créer un moteur de rendu et peut accepter un paramètre, qui est un objet RenderOptions. Cet objet encapsule la configuration pertinente du moteur de rendu, comme transmettre l'instance d'application ici pour démarrer, comment gérer respectivement différents types de nœuds virtuels, etc.

renderToString

renderToString est la fonction de rendu correspondant à cette application SSR. Cette fonction n'accepte qu'une seule instance d'application Vue comme paramètre. Si vous souhaitez afficher plusieurs instances d'application, vous devez les appeler séquentiellement. La valeur de retour de cette fonction est la chaîne de résultat rendue.

3. Implémenter le rendu côté serveur

Les trois fonctions ci-dessus sont les fonctions de base utilisées pour prendre en charge SSR dans Vue3. Ensuite, nous utiliserons un exemple simple pour montrer comment les utiliser pour implémenter le rendu côté serveur.

Nous supposons que nous avons un composant Vue simple comme suit :

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

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

Nous devons d'abord modifier le fichier d'entrée et utiliser la fonction createSSRApp pour créer notre instance d'application :

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

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

Ensuite, nous devons créer un moteur de rendu pour restituer l'instance Vue. ：

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>`
}

Nous avons introduit la fonction createRenderer dans vue-server-renderer et créé une instance de routeur. Ensuite, nous devons pré-remplir les données dans le fichier App.vue pour garantir que les données de chaîne HTML rendues par le serveur sont les mêmes que celles rendues par le client. Nous pouvons écrire les résultats précédemment rendus sur la page lors d'une requête côté serveur, puis les transmettre au client pour le rendu.

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 }
}

Enfin, nous renvoyons la chaîne HTML rendue au client.

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}`)
})

Ce qui précède est un exemple simple d'implémentation du rendu côté serveur Vue3.

4. Résumé

Cet article présente les fonctions SSR dans Vue3 et utilise un exemple simple pour présenter comment utiliser ces fonctions pour implémenter le rendu côté serveur. Je pense que grâce à l'introduction de cet article, les lecteurs peuvent déjà avoir une compréhension plus claire des fonctions SSR dans Vue3 et peuvent les utiliser pour implémenter leurs propres applications de rendu côté serveur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

html 前端框架封装字符串对象 SEO

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des fonctions globales dans Vue3 : applications permettant des appels de méthodes globales plus pratiquesArticle suivant：Explication détaillée des fonctions globales dans Vue3 : applications permettant des appels de méthodes globales plus pratiques

Articles Liés

Voir plus