Maison > Article > interface Web > Fonction SSR dans Vue3 : implémentation du rendu côté serveur

Fonction SSR dans Vue3 : implémentation du rendu côté serveur

WBOYoriginal: 2023-06-18 11:01:373650parcourir

Avec la popularisation de l'Internet mobile et le développement rapide de la technologie du cloud computing, le framework front-end est progressivement devenu la principale force du développement WEB. En plus de fournir une structure de page pratique, des effets interactifs et un affichage de contenu dynamique, le cadre frontal présente également les avantages d'un développement rapide, d'une maintenabilité, d'une optimisation des performances, etc., ce qui améliore considérablement l'efficacité du développement et l'expérience utilisateur. En tant que framework frontal populaire, Vue.js version 3.0 a été officiellement publiée, apportant plus d'innovation et d'optimisation. Parmi eux, l'implémentation du Server Side Rendering (SSR) est une mise à jour importante dans Vue3.

1. La définition et les avantages de SSR

SSR fait référence à l'achèvement du travail de rendu de page côté serveur, au lieu d'utiliser JavaScript pour générer dynamiquement une arborescence DOM côté client, afin d'atteindre l'objectif d'amélioration rapide de la page. vitesse de rendu et optimisation des moteurs de recherche. L'architecture SPA (Single Page Application) traditionnelle utilise généralement le mode de rendu côté client pour afficher les pages via le rendu Vue.js côté client. Les avantages sont une bonne interactivité dynamique et une bonne expérience utilisateur. Cependant, étant donné que SPA ne peut afficher la page qu'une fois le téléchargement et l'analyse de JavaScript terminés, il y aura des problèmes tels qu'un chargement lent de la page et un référencement peu convivial. SSR envoie le document HTML rendu côté serveur au client, ce qui optimise non seulement la vitesse de chargement et le référencement, mais présente également les avantages d'une meilleure performance de rendu initial, d'une meilleure accessibilité et d'un meilleur partage social.

2. L'implémentation de SSR dans Vue3

Vue.js fournit une solution pour prendre en charge le rendu côté serveur dans la version 2.0 pour répondre à certains scénarios de demande particuliers. Dans Vue3, SSR a reçu un support plus complet, dont le cœur est la fonction createRenderer. Examinons ensuite l'implémentation de SSR dans Vue3.

Installer les dépendances associées

Vue3 fournit officiellement deux dépendances principales : @vue/server-renderer et @vue/compiler-sfc. La première est utilisée pour générer du HTML, du CSS, du script et d'autres ressources et les convertir en chaînes de retour. . Ce dernier fournit des capacités de compilation et d'analyse pour les fichiers .vue et peut convertir les fichiers .vue en fonctions de rendu.

Définissez la fonction de rendu

Vue3 recommande d'utiliser la fonction de rendu au lieu du modèle de modèle. Vous pouvez définir la fonction de rendu via la fonction createRenderer. La fonction createRenderer renvoie un objet qui contient la fonction de rendu et d'autres informations associées.

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer();
const app = require('./app');

renderer.renderToString(app).then((html) => {
  console.log(html);
}).catch((err) => {
  console.error(err);
});

Parmi eux, app est une instance de Vue, qui doit d'abord être initialisée via la fonction createApp, puis montée sur l'élément DOM. Ensuite, vous pouvez utiliser la fonction de rendu pour restituer l'application.

Créer des composants de routeur et de conteneur

Des outils tels que vue-router et vuex doivent être utilisés sous SSR pour prendre en charge la gestion des composants et des états correspondant aux différentes routes. Avant de faire cela, vous devez créer les composants du routeur et du conteneur.

const { createRouter } = require('vue-router');
const App = require('./App.vue');

const router = createRouter({
  routes: [
    { path: '/', component: App }
  ]
});

Écrire du code pour implémenter SSR

const express = require('express');
const { createSSRApp } = require('vue');

const server = express();
const template = `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Vue3 SSR</title>
    </head>
    <body>
      <!--vue-ssr-outlet-->
    </body>
  </html>
`;

const { createRenderer } = require('@vue/server-renderer');
const renderer = createRenderer({
  template: template
});

server.use(express.static('dist'));

server.get('*', async (req, res) => {
  const app = createSSRApp(require('./src/App.vue'));
  const router = require('./src/router').default;
  app.use(router);
  const html = await renderer.renderToString(app);
  res.send(html);
});

server.listen(3000, () => {
  console.log('Server is running at http://localhost:3000');
});

Lors de l'écriture de code pour implémenter SSR, vous devez créer un projet express et utiliser la fonction createSSRApp pour créer une instance Vue, puis intégrer le routeur, la gestion de l'état, la fonction createRenderer, etc. .

3. Notes sur SSR

Lorsque vous utilisez SSR pour implémenter le rendu de page, vous devez faire attention aux points suivants :

Vous devez vous appuyer sur diverses ressources externes, notamment des ressources statiques, des interfaces de données, des bases de données, des caches et stockage de fichiers, etc. Dans le même temps, cela pose également davantage de défis aux étudiants en exploitation et maintenance.
Étant donné que le rendu côté serveur nécessite au moins autant de temps que le rendu, les performances de SSR sont principalement affectées par la bande passante du serveur et du réseau, tandis que les performances globales du client n'auront pas beaucoup d'impact.
SSR doit convertir les composants Vue au format chaîne pour le rendu, il nécessite donc la conversion et la compilation des composants Vue, ce qui entraînera une certaine consommation et un certain temps de compilation.

En bref, le SSR est une technologie relativement nouvelle. Vous devez faire attention à la gestion de divers problèmes en termes de performances et d'utilisation. Vous pouvez faire une sélection technique et une utilisation réelle en fonction de vos propres besoins. En particulier dans les systèmes temps réel à grande échelle, une attention particulière doit être accordée à la sécurité, à la maintenabilité et aux performances du SSR.

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!

JavaScript 架构 css vue.js html 前端框架 express 字符串接口 JS 对象 dom 数据库搜索引擎性能优化 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：Fonction définirAsyncComponent dans Vue3 : chargement asynchrone des composantsArticle suivant：Fonction définirAsyncComponent dans Vue3 : chargement asynchrone des composants

Articles Liés

Voir plus