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 dalam fail direktori akar, digunakan untuk memulakan pelayan SSR dan melakukan pemaparan halaman: 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

Kami juga perlu mengubah suai fail package.json dan menukar arahan bina kepada build:ssr, untuk membezakan cara SSR dibina:

rrreee

Sekarang, kita boleh melaksanakan arahan berikut untuk membina dan memulakan pelayan SSR:

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

#🎜🎜#Dalam aplikasi SSR, satu perkara yang perlu diberi perhatian ialah memandangkan tiada kod berkaitan penyemak imbas akan dilaksanakan semasa pemaparan pelayan, sesetengah API yang hanya tersedia dalam penyemak imbas tidak boleh digunakan, seperti tetingkap dan document. Untuk menyelesaikan masalah ini, Vue 3 menyediakan kami beberapa fungsi cangkuk khas. #🎜🎜#Pertama, kita perlu mentakrifkan fungsi createApp dalam fail kemasukan, seperti yang ditunjukkan di bawah: #🎜🎜#rrreee#🎜🎜#Kemudian, semasa pemaparan sebelah pelayan, kami menggunakan kaedah renderToString untuk memaparkan aplikasi Vue, seperti yang ditunjukkan di bawah: #🎜🎜#rrreee#🎜🎜# fungsicreateSSRApp digunakan untuk mencipta contoh aplikasi pada pelayan, renderToString Kaedah Digunakan untuk menjadikan contoh aplikasi menjadi rentetan. #🎜🎜##🎜🎜#Melalui contoh konfigurasi dan kod di atas, kami berjaya menggunakan teknologi SSR dalam Vue 3. SSR bukan sahaja boleh meningkatkan kesan SEO aplikasi, tetapi juga menjadikan aplikasi kami kelihatan kepada pengguna dengan lebih pantas. #🎜🎜##🎜🎜#Ringkasan: #🎜🎜#Artikel ini memperkenalkan amalan aplikasi teknologi SSR dalam Vue 3 dan menyediakan contoh kod yang berkaitan. Dengan menggunakan SSR, kami boleh menyelesaikan masalah SEO aplikasi SPA dan meningkatkan kesan rangkak dan kedudukan enjin carian. Fungsi SSR Vue 3 menyediakan alat dan sokongan yang lebih baik untuk pembangun bahagian hadapan, membantu kami membina aplikasi yang lebih dipercayai, dioptimumkan dan mempunyai kesan SEO yang lebih baik. Dengan perkembangan pesat aplikasi SPA, SSR ialah teknologi yang patut diterokai dan dicuba, baik dari segi pengalaman pengguna dan pengoptimuman enjin carian. #🎜🎜#

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!