Vue 3中的SSR技術應用實踐，提升應用的SEO效果

Vue 3中的SSR技術應用實踐，提升應用程式的SEO效果

隨著前端開發的快速發展，SPA（單頁應用）已經成為了主流。 SPA的好處不言而喻，可以提供流暢的使用者體驗，但卻在SEO（搜尋引擎優化）方面有一些挑戰。由於SPA在前端渲染階段只回傳一個HTML模板，所以大部分內容是透過JavaScript動態載入的，導致搜尋引擎在抓取、索引和排名方面的困難。為了解決這個問題，服務端渲染（SSR）技術應運而生。

Vue 3作為目前最受歡迎的JavaScript框架之一，為開發者提供了SSR的支援。 Vue 3的SSR利用Vite和VitePress工具實現了JavaScript的同構渲染，允許在伺服器端預先渲染回應，並在客戶端上進行互動。本文將介紹Vue 3中SSR技術的應用實踐，並展示如何運用SSR提升應用的SEO效果。

首先，我們需要安裝Vue CLI 4以支援Vue 3的SSR功能。在命令列中執行以下命令：

npm install -g @vue/cli@4

接下來，我們使用Vue CLI建立一個專案：

vue create vue-ssr-demo

選擇"Manually select features"，然後選取"Babel"和"Choose Vue version "，選擇"2.x"，繼續建立專案。

建立完成後，我們進入專案目錄並安裝相關依賴：

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

然後，我們需要在根目錄下建立一個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函數用於在伺服器上建立應用實例，renderToString方法用於將應用程式實例渲染成字串。

透過以上的設定和程式碼範例，我們成功應用了Vue 3中的SSR技術。 SSR不僅可以提升應用的SEO效果，還能讓我們的應用程式更快呈現給使用者。

總結：
本文介紹了Vue 3中的SSR技術應用實踐，並提供了相關的程式碼範例。透過使用SSR，我們可以解決SPA應用在SEO方面的問題，提升搜尋引擎的抓取與排名效果。 Vue 3的SSR功能為前端開發者提供了更好的工具和支持，幫助我們建立更可靠、優化和具備較好SEO效果的應用。隨著SPA應用的快速發展，無論是在使用者體驗或搜尋引擎優化方面，SSR都是值得探索嘗試的技術。

以上是Vue 3中的SSR技術應用實踐，提升應用的SEO效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！