Vue優秀實踐－從0到1實現SSR渲染

在網路開發中，SSR渲染（Server Side Rendering）是一項非常關鍵的技術。它可以將頁面的初始渲染工作在伺服器上完成，然後將渲染好的HTML檔案傳遞給客戶端展示。相較於傳統的客戶端渲染（CSR），SSR渲染可以提高網頁的首屏載入速度、搜尋引擎優化能力等。本文將介紹如何透過Vue框架來實現SSR渲染。

1. 建立Vue專案
   首先，我們需要建立一個基礎的Vue專案。在終端機執行以下指令：

vue create my-ssr-app

透過該指令，我們可以快速建立一個Vue的基礎項目，然後透過指令進入專案目錄：

cd my-ssr-app

2. 新增SSR依賴
   接下來，我們需要加入SSR相關的依賴。在終端依序輸入以下指令：

npm install --save vue vue-server-renderer express

• vue：Vue框架本身的依賴。
• vue-server-renderer：Vue的SSR渲染器。
• express：一個基於Node.js的網路應用程式框架。

上述指令會自動將依賴安裝到專案的package.json檔案中。

3. 修改Vue入口文件
   在src目錄下，我們可以找到main.js文件，這是Vue框架的入口文件。我們需要進行修改，以支援SSR渲染。首先，我們需要將Vue的實例轉變為工廠函數，這樣在SSR時，就可以為每個請求建立一個新的實例。將原本的：

new Vue({
  render: h => h(App),
}).$mount('#app')

修改為：

export function createApp() {
  return new Vue({
    render: h => h(App)
  })
}

然後，我們需要將createApp函數匯出，在後面建立伺服器腳本時會用到。

4. 建立伺服器腳本
   在專案根目錄下，我們需要建立一個伺服器腳本。在專案根目錄下建立一個名為server.js的檔案。在該檔案中，我們需要匯入相關的依賴，然後建立一個簡單的伺服器：

const express = require('express')
const server = express()
const { createBundleRenderer } = require('vue-server-renderer')
const renderer = createBundleRenderer(require('./dist/vue-ssr-server-bundle.json'))
const template = require('fs').readFileSync('./index.html', 'utf-8')

server.use('/dist', express.static('./dist'))

server.get('*', (req, res) => {
  const context = { url: req.url }
  renderer.renderToString(context, (err, html) => {
    if (err) {
      console.error(err)
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(template.replace('<div id="app"></div>', `<div id="app">${html}</div>`))
  })
})

server.listen(3000, () => {
  console.log('Server running at http://localhost:3000')
})

這段程式碼實作了一個簡單的Express伺服器，它會將./dist目錄下的靜態檔案暴露在/dist路由下，並且對於所有路由請求（*），使用createBundleRenderer方法從vue- ssr-server-bundle.json檔案中讀取server bundle，並且將渲染後的HTML文字對應到一個基礎的HTML模版中，將最終結果傳回給客戶端。

5. 進行建置並啟動伺服器
   在終端機執行以下命令：

npm run build
npm run serve

其中，npm run build指令會將 src目錄下的程式碼建置為server bundle和client bundle，並且將建置後的結果存放在dist目錄下。 npm run serve指令會啟動伺服器並監聽3000埠。在瀏覽器中輸入http://localhost:3000即可存取SSR渲染後的頁面。

到這裡，我們就完成了一個簡單的Vue SSR渲染的實作。當然，SSR渲染還有很多具體操作和細節需要我們深入了解和實踐，本文只是提供了一個基礎的入門範例。希望本文能對大家掌握Vue SSR渲染有所幫助。

以上是Vue優秀實踐－從0到1實現SSR渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！