So verwenden Sie Vue für serverseitiges Rendering und SEO-Optimierung-View.js-php.cn

So verwenden Sie Vue für serverseitiges Rendering und SEO-Optimierung

王林

Freigeben： 2023-08-02 14:57:08

Original

1066 Leute haben es durchsucht

So verwenden Sie Vue für serverseitiges Rendering und SEO-Optimierung

Einführung:
Da die Trennung von Front-End und Back-End immer beliebter wird, wird Vue als beliebtes JavaScript-Framework häufig im Front-End verwendet Entwicklung. Da der Standardansatz von Vue jedoch das clientseitige Rendering ist, kann dies einige SEO-Probleme (Suchmaschinenoptimierung) verursachen. Um diese Probleme zu lösen, hat Vue das Konzept des serverseitigen Renderings (SSR) eingeführt. In diesem Artikel wird detailliert beschrieben, wie Vue für serverseitiges Rendering und SEO-Optimierung verwendet wird.

1. Das Konzept und die Vorteile des serverseitigen Renderings (SSR)

Was ist serverseitiges Rendering?
Server Side Rendering (SSR) bezieht sich auf das Rendern des HTML-Strings der Vue-Anwendung direkt auf der Serverseite und die Rückgabe an den Client, anstatt nur eine leere HTML-Datei zurückzugeben und dann die Seite dynamisch über den Client-Inhalt zu generieren.
Vorteile des serverseitigen Renderings
Unterstützung des Suchmaschinen-Crawlings: Da Suchmaschinen-Crawler hauptsächlich auf der Grundlage von HTML-Inhalten analysieren, können durch serverseitiges Rendering vollständige HTML-Seiten an Suchmaschinen zurückgegeben werden, was sich positiv auf die SEO-Optimierung auswirkt.
Beschleunigen Sie die Ladezeit des ersten Bildschirms: Da das serverseitige Rendering die gerenderte Seite direkt zurückgibt, muss der Benutzer nur auf das Laden des endgültigen Inhalts warten, was die Ladezeit des ersten Bildschirms erheblich verkürzt.
Bessere Leistung: Durch die Reduzierung der Anzahl und Größe der Datenübertragung zwischen Front- und Back-End kann serverseitiges Rendering die Gesamtreaktionsgeschwindigkeit der Seite verbessern und das Benutzererlebnis verbessern.

2. Schritte zur Verwendung von Vue für serverseitiges Rendering

Erstellen eines Vue-Projekts
Erstellen Sie zunächst ein Vue-Projekt, das mit der Vue-CLI schnell erstellt werden kann.

vue create ssr-app
cd ssr-app

Nach dem Login kopieren

Unterstützung für serverseitiges Rendering hinzufügen
Installieren Sie im Stammverzeichnis des Projekts das Paket vue-server-renderer und erstellen Sie eine Serverdatei. vue-server-renderer包，并创建一个服务器文件。

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

配置服务器端渲染
接下来，我们需要配置服务器端渲染的参数。首先，需要导入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
});

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

三、SEO优化

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

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

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

Nach dem Login kopieren

在运行npm run build

rrreee

Fügen Sie in der Serverdatei server/index.js die erforderlichen Module ein und erstellen Sie einen Express-Server.
rrreee

vue.config.js

npm run build

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Vue für serverseitiges Rendering und SEO-Optimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!