Comment utiliser Vue pour le rendu côté serveur et l'optimisation du référencement

Comment utiliser Vue pour le rendu côté serveur et l'optimisation du référencement

Introduction :
Alors que la séparation du front-end et du back-end devient de plus en plus populaire, Vue, en tant que framework JavaScript populaire, est largement utilisé en front-end développement. Cependant, étant donné que l'approche par défaut de Vue est le rendu côté client, cela peut entraîner des problèmes liés au référencement (optimisation des moteurs de recherche). Afin de résoudre ces problèmes, Vue a introduit le concept de rendu côté serveur (SSR). Cet article présentera en détail comment utiliser Vue pour le rendu côté serveur et l'optimisation du référencement.

1. Le concept et les avantages du rendu côté serveur (SSR)

1. Qu'est-ce que le rendu côté serveur ?
   Le rendu côté serveur (SSR) fait référence au rendu de la chaîne HTML de l'application Vue directement côté serveur et à son renvoi au client, au lieu de simplement renvoyer un fichier HTML vide, puis de générer dynamiquement la page via le contenu du client.
2. Avantages du rendu côté serveur
3. Prise en charge de l'exploration des moteurs de recherche : étant donné que les robots des moteurs de recherche analysent principalement en fonction du contenu HTML, des pages HTML complètes peuvent être renvoyées aux moteurs de recherche via le rendu côté serveur, ce qui est bénéfique pour l'optimisation du référencement.
4. Accélérez le temps de chargement du premier écran : étant donné que le rendu côté serveur renvoie directement la page rendue, l'utilisateur n'a qu'à attendre que le contenu final se charge, ce qui réduit considérablement le temps de chargement du premier écran.
5. Meilleures performances : en réduisant le nombre et la taille de la transmission de données entre le front-end et le back-end, le rendu côté serveur peut améliorer la vitesse de réponse globale de la page et améliorer l'expérience utilisateur.

2. Étapes pour utiliser Vue pour le rendu côté serveur

1. Créer un projet Vue
   Tout d'abord, créez un projet Vue, qui peut être rapidement construit à l'aide de Vue CLI.

vue create ssr-app
cd ssr-app

2. Ajouter la prise en charge du rendu côté serveur
   Dans le répertoire racine du projet, installez le package vue-server-renderer et créez un fichier serveur. vue-server-renderer包，并创建一个服务器文件。

npm install vue-server-renderer
mkdir server
touch server/index.js

在服务器文件server/index.js中，引入所需的模块，并创建一个Express服务器。

const express = require('express');
const { createBundleRenderer } = require('vue-server-renderer');
const server = express();

3. 配置服务器端渲染
   接下来，我们需要配置服务器端渲染的参数。首先，需要导入Vue的实例和项目的入口文件，以及一个渲染器函数。

const fs = require('fs');
const path = require('path');
const serverBundle = require('../dist/server-bundle.json');
const clientManifest = require('../dist/client-manifest.json');
const template = fs.readFileSync(path.resolve(__dirname, '../public/index.html'), 'utf-8');
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推荐
  template, // （可选）页面模板
  clientManifest // （可选）客户端构建 manifest
});

4. 处理路由请求
   使用服务器端渲染的关键是处理路由请求，并将渲染结果返回给客户端。在服务器文件中，需要定义路由和对应的处理程序。

server.get('*', (req, res) => {
  const context = { url: req.url };
  renderer.renderToString(context, (err, html) => {
    if (err) {
      if (err.code === 404) {
        res.status(404).end('Page not found');
      } else {
        res.status(500).end('Internal Server Error');
      }
    } else {
      res.end(html);
    }
  });
});

5. 启动服务器
   最后，我们需要启动服务器来监听请求。

server.listen(3000, () => {
  console.log('Server running');
});

三、SEO优化

1. 基本SEO优化
   在使用服务器端渲染的基础上，我们还可以采取一些额外措施来进一步优化SEO效果。
2. 合理设置meta标签：通过在页面中添加meta标签，包括description、title等元信息，可以帮助搜索引擎更好地理解网页内容。
3. 创建友好的URL：使用有意义的URL结构，注意使用关键词和描述性词语，便于搜索引擎和用户更好地理解页面内容。
4. 使用预渲染技术
   预渲染是指在构建过程中预先渲染静态页面，并将其保存到服务器上。这种方式利用了服务器的计算能力，生成静态页面，并在访问时直接返回给客户端，提高了首屏加载速度。

在Vue项目的vue.config.js文件中，添加以下配置：

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
      prerender: true // 启用预渲染
    }
  }
}

在运行npm run build

rrreee

Dans le fichier serveur server/index.js, introduisez les modules requis et créez un serveur Express.
rrreee

Configurer le rendu côté serveur🎜Ensuite, nous devons configurer les paramètres du rendu côté serveur. Tout d’abord, vous devez importer l’instance Vue et le fichier d’entrée du projet, ainsi qu’une fonction de rendu. 🎜🎜rrreee
🎜Gestion des demandes de routage🎜La clé de l'utilisation du rendu côté serveur est de gérer les demandes de routage et de renvoyer les résultats du rendu au client. Dans le fichier serveur, les routes et les gestionnaires correspondants doivent être définis. 🎜🎜rrreee
🎜Démarrer le serveur🎜Enfin, nous devons démarrer le serveur pour écouter les requêtes. 🎜🎜rrreee🎜3. Optimisation SEO🎜🎜🎜Optimisation SEO de base🎜Sur la base de l'utilisation du rendu côté serveur, nous pouvons également prendre des mesures supplémentaires pour optimiser davantage l'effet SEO. 🎜🎜Définissez les balises méta de manière appropriée : en ajoutant des balises méta à la page, y compris une description, un titre et d'autres méta-informations, vous pouvez aider les moteurs de recherche à mieux comprendre le contenu de la page Web. 🎜🎜Créez des URL conviviales : utilisez des structures d'URL significatives, faites attention à l'utilisation de mots-clés et de mots descriptifs, afin que les moteurs de recherche et les utilisateurs puissent mieux comprendre le contenu de la page. 🎜🎜Utilisez la technologie de pré-rendu 🎜 Le pré-rendu signifie pré-rendu les pages statiques pendant le processus de construction et les enregistrer sur le serveur. Cette méthode utilise la puissance de calcul du serveur pour générer des pages statiques et les renvoie directement au client lors de son accès, améliorant ainsi la vitesse de chargement du premier écran. 🎜🎜🎜Dans le fichier vue.config.js du projet Vue, ajoutez la configuration suivante : 🎜rrreee🎜Lors de l'exécution de npm run build, le processus de construction de Vue se poursuivra Pré-rendez automatiquement et enregistrez la page pré-rendue sur le serveur. 🎜🎜Conclusion : 🎜En utilisant Vue pour le rendu côté serveur et en prenant une série de mesures d'optimisation du référencement, vous pouvez obtenir de meilleurs effets de référencement, améliorer le classement du site Web dans les moteurs de recherche et également mieux améliorer l'expérience utilisateur. J'espère que cet article pourra aider les développeurs front-end et être appliqué dans des projets. 🎜

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!