Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO-View.js-php.cn

Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO

王林

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

asal

1020 orang telah melayarinya

Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO

Pengenalan:
Memandangkan pemisahan bahagian hadapan dan bahagian belakang menjadi semakin popular, Vue, sebagai rangka kerja JavaScript yang popular, digunakan secara meluas di bahagian hadapan pembangunan. Walau bagaimanapun, memandangkan pendekatan lalai Vue ialah pemaparan sebelah pelanggan, ini mungkin menyebabkan beberapa isu berkaitan SEO (pengoptimuman enjin carian). Untuk menyelesaikan masalah ini, Vue memperkenalkan konsep pemaparan sisi pelayan (SSR) Artikel ini akan memperkenalkan secara terperinci cara menggunakan Vue untuk pemaparan bahagian pelayan dan pengoptimuman SEO.

1. Konsep dan kelebihan pemaparan sebelah pelayan (SSR)

Apakah pemaparan sebelah pelayan?
Server Side Rendering (SSR) merujuk kepada pemaparan rentetan HTML aplikasi Vue terus pada bahagian pelayan dan mengembalikannya kepada klien, bukannya hanya mengembalikan fail HTML kosong dan kemudian menjana halaman secara dinamik melalui kandungan klien.
Kelebihan pemaparan sebelah pelayan
Sokong rangkak enjin carian: Memandangkan perangkak enjin carian terutamanya menghuraikan berdasarkan kandungan HTML, halaman HTML yang lengkap boleh dikembalikan kepada enjin carian melalui pemaparan sebelah pelayan, yang bermanfaat untuk pengoptimuman SEO.
Mempercepatkan masa pemuatan skrin pertama: Memandangkan pemaparan sebelah pelayan mengembalikan halaman yang dipaparkan secara langsung, pengguna hanya perlu menunggu kandungan akhir dimuatkan, yang sangat mengurangkan masa pemuatan skrin pertama.
Prestasi yang lebih baik: Dengan mengurangkan bilangan dan saiz data yang dihantar antara hujung hadapan dan belakang, pemaparan bahagian pelayan boleh meningkatkan kelajuan respons keseluruhan halaman dan meningkatkan pengalaman pengguna.

2. Langkah menggunakan Vue untuk pemaparan sebelah pelayan

Buat projek Vue
Pertama, buat projek Vue, yang boleh dibina dengan cepat menggunakan Vue CLI.

vue create ssr-app
cd ssr-app

Salin selepas log masuk

Tambah sokongan pemaparan bahagian pelayan
Dalam direktori akar projek, pasang pakej vue-server-renderer dan buat fail pelayan. vue-server-renderer包，并创建一个服务器文件。

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

三、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 // 启用预渲染
    }
  }
}

Salin selepas log masuk

在运行npm run build

rrreee

Dalam fail pelayan server/index.js, perkenalkan modul yang diperlukan dan buat pelayan Express.
rrreee

vue.config.js

npm run build

Atas ialah kandungan terperinci Cara menggunakan Vue untuk pemaparan sebelah pelayan dan pengoptimuman SEO. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!