Amalan aplikasi teknologi SSR dalam Vue 3 untuk meningkatkan kesan SEO aplikasi

Amalan aplikasi teknologi SSR dalam Vue 3 untuk meningkatkan kesan SEO aplikasi

Dengan perkembangan pesat pembangunan front-end, SPA (aplikasi satu halaman) telah menjadi arus perdana. Faedah SPA adalah jelas dan boleh memberikan pengalaman pengguna yang lancar, tetapi terdapat beberapa cabaran dari segi SEO (pengoptimuman enjin carian). Memandangkan SPA hanya mengembalikan templat HTML dalam peringkat pemaparan bahagian hadapan, kebanyakan kandungan dimuatkan secara dinamik melalui JavaScript, menyebabkan enjin carian mengalami kesukaran dalam merangkak, mengindeks dan kedudukan. Untuk menyelesaikan masalah ini, teknologi pemaparan sisi pelayan (SSR) telah wujud.

Vue 3, sebagai salah satu rangka kerja JavaScript yang paling popular pada masa ini, menyediakan pembangun dengan sokongan SSR. SSR untuk Vue 3 memanfaatkan alatan Vite dan VitePress untuk melaksanakan pemaparan isomorfik JavaScript, membolehkan respons dipra-pamerkan pada bahagian pelayan dan berinteraksi dengan pada bahagian klien. Artikel ini akan memperkenalkan amalan aplikasi teknologi SSR dalam Vue 3, dan menunjukkan cara menggunakan SSR untuk meningkatkan kesan SEO aplikasi.

Pertama sekali, kita perlu memasang Vue CLI 4 untuk menyokong fungsi SSR Vue 3. Jalankan arahan berikut dalam baris arahan:

npm install -g @vue/cli@4

Seterusnya, kami mencipta projek menggunakan Vue CLI:

vue create vue-ssr-demo

Pilih "Pilih ciri secara manual", kemudian tandakan "Babel" dan "Pilih versi Vue", pilih "2.x" dan teruskan membuat projek.

Selepas penciptaan selesai, kami memasuki direktori projek dan memasang kebergantungan yang berkaitan:

cd vue-ssr-demo
npm install vuex vue-router express

Kemudian, kita perlu mencipta server.js</code > dalam fail direktori akar, digunakan untuk memulakan pelayan SSR dan melakukan pemaparan halaman: <code>server.js文件，用于启动SSR服务器并进行页面渲染：

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

// 读取生成的bundle文件
const bundle = require('./dist/vue-ssr-server-bundle.json')
const renderer = createBundleRenderer(bundle, {
  runInNewContext: false,
  template: require('fs').readFileSync('./public/index.html', 'utf-8'),
  clientManifest: require('./dist/vue-ssr-client-manifest.json')
})

// 静态资源的路径
server.use(express.static('./dist'))

// 所有路由都交给Vue处理
server.get('*', (req, res) => {
  const context = { url: req.url }

  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      if (err.code === 404) {
        res.status(404).end('Page not found')
      } else {
        res.status(500).end('Internal Server Error')
      }
    }

    res.end(html)
  })
})

// 启动服务器
server.listen(8080)
console.log('Server is running on http://localhost:8080')

我们还需要修改package.json文件，将build命令改为build:ssr，以区分SSR的构建方式：

"scripts": {
  "build:ssr": "vue-cli-service build --target node --ssr"
}

现在，我们可以执行以下命令来构建和启动SSR服务器：

npm run build:ssr
node server.js

以上步骤完成后，我们成功地启动了一个SSR的Vue 3应用。

在SSR应用中，有一点需要注意的是，由于在服务器渲染期间不会执行任何浏览器相关的代码，因此不能使用一些只在浏览器可用的API，如window和document。为了解决这个问题，Vue 3为我们提供了一些特殊的钩子函数。
首先，我们需要在入口文件中定义createApp函数，如下所示：

import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

export function createApp() {
  const app = createSSRApp(App)
  app.use(router)
  app.use(store)

  return { app, router, store }
}

然后，在服务器端渲染期间，我们使用renderToString方法来渲染Vue应用，如下所示：

import { createApp } from './main'

export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()

    router.push(context.url)

    router.isReady().then(() => {
      context.rendered = () => {
        context.state = store.state
      }
      resolve(app)
    }, reject)
  })
}

createSSRApp函数用于在服务器上创建应用实例，renderToStringrrreee

rrreee

rrreee
Above Selepas langkah-langkah selesai, kami berjaya melancarkan aplikasi SSR Vue 3.

Atas ialah kandungan terperinci Amalan aplikasi teknologi SSR dalam Vue 3 untuk meningkatkan kesan SEO aplikasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!