interface Web
Voir.js
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
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment référencer le fichier JS avec Vue.js
Apr 07, 2025 pm 11:27 PM
Il existe trois façons de se référer aux fichiers JS dans Vue.js: spécifiez directement le chemin à l'aide du & lt; script & gt; étiqueter;; importation dynamique à l'aide du crochet de cycle de vie monté (); et l'importation via la bibliothèque de gestion de l'État Vuex.
Comment ajouter des fonctions aux boutons pour Vue
Apr 08, 2025 am 08:51 AM
Vous pouvez ajouter une fonction au bouton VUE en liant le bouton dans le modèle HTML à une méthode. Définissez la logique de la fonction de méthode et d'écriture dans l'instance Vue.
Comment utiliser Watch in Vue
Apr 07, 2025 pm 11:36 PM
L'option Watch dans Vue.js permet aux développeurs d'écouter des modifications de données spécifiques. Lorsque les données changent, regardez déclenche une fonction de rappel pour effectuer des vues de mise à jour ou d'autres tâches. Ses options de configuration incluent immédiatement, qui spécifie s'il faut exécuter un rappel immédiatement, et profond, ce qui spécifie s'il faut écouter récursivement les modifications des objets ou des tableaux.
Comment utiliser Bootstrap en Vue
Apr 07, 2025 pm 11:33 PM
L'utilisation de bootstrap dans vue.js est divisée en cinq étapes: installer bootstrap. Importer un bootstrap dans main.js. Utilisez le composant bootstrap directement dans le modèle. Facultatif: style personnalisé. Facultatif: utilisez des plug-ins.
Comment revenir à la page précédente par Vue
Apr 07, 2025 pm 11:30 PM
Vue.js dispose de quatre méthodes pour revenir à la page précédente: $ router.go (-1) $ router.back () utilise & lt; router-link to = & quot; / & quot; Composant Window.History.back (), et la sélection de la méthode dépend de la scène.
Vue réalise l'effet de défilement de chapiteau / texte
Apr 07, 2025 pm 10:51 PM
Implémentez les effets de défilement marquee / texte dans VUE, en utilisant des animations CSS ou des bibliothèques tierces. Cet article présente comment utiliser l'animation CSS: créer du texte de défilement et envelopper du texte avec & lt; div & gt;. Définissez les animations CSS et défini: caché, largeur et animation. Définissez les images clés, Set Transforment: Translatex () au début et à la fin de l'animation. Ajustez les propriétés d'animation telles que la durée, la vitesse de défilement et la direction.
Comment interroger la version de Vue
Apr 07, 2025 pm 11:24 PM
Vous pouvez interroger la version Vue en utilisant Vue Devtools pour afficher l'onglet Vue dans la console du navigateur. Utilisez NPM pour exécuter la commande "NPM List -g Vue". Recherchez l'élément VUE dans l'objet "dépendances" du fichier package.json. Pour les projets Vue CLI, exécutez la commande "Vue --version". Vérifiez les informations de la version dans le & lt; script & gt; Tag dans le fichier html qui fait référence au fichier VUE.
Comment utiliser Vue Traversal
Apr 07, 2025 pm 11:48 PM
Il existe trois méthodes courantes pour que Vue.js traverse les tableaux et les objets: la directive V-FOR est utilisée pour traverser chaque élément et les modèles de rendu; La directive V-Bind peut être utilisée avec V-FOR pour définir dynamiquement les valeurs d'attribut pour chaque élément; et la méthode .map peut convertir les éléments du tableau en nouveaux tableaux.
