深入了解Vue SSR: vue-server-renderer

Vue SSR的全稱為Vue服務器端渲染，使得Vue組件可以通過NodeJS服務器來預渲染成HTML字符串，可以有效提升首屏的渲染速度和搜索引擎優化效果。Vue SSR的核心在於vue-server-renderer模塊，本文將從以下幾個方面對其進行詳細闡述。

一、入門指南

在使用vue-server-renderer之前，需要確保如下NodeJS環境和Vue安裝：

node >= 8.9.0
npm >= 5.6.0
vue >= 2.5.0

使用npm命令安裝vue-server-renderer模塊：

npm install vue-server-renderer

引入vue-server-renderer

const Vue = require('vue')
const renderer = require('vue-server-renderer').createRenderer()

二、服務端渲染步驟

下面是vue-server-renderer的核心代碼示例，它顯示了如何使用createBundleRenderer渲染Vue應用程序：

const vueServerRenderer = require('vue-server-renderer')
const fs = require('fs')
const template = fs.readFileSync('./template.html', 'utf-8')
const serverBundle = require('./dist/vue-ssr-server-bundle')
const clientManifest = require('./dist/vue-ssr-client-manifest')

const renderer = vueServerRenderer.createBundleRenderer(serverBundle, {
  runInNewContext: false,
  template: template,
  clientManifest: clientManifest
})

const context = { 
  url: '/some-url'
}

renderer.renderToString(context, (err, html) => {
  console.log(html)
})

首先，使用createBundleRenderer從打包好的Vue服務端渲染bundle對象中創建一個渲染器（renderer）。然後設置SSR所需的上下文內容，包括url和其他信息。最後調用renderToString方法在服務器端渲染Vue應用程序並生成HTML模板。

三、自定義配置

可以通過自定義配置選項來定義和控制渲染的行為，比如渲染模板的路徑，是否混合（hydrating）客戶端組件，是否初始化store並提供初始state等等。

下面是一個更為完整的例子：

const vm = new Vue({

data: {

a: 1,

b: 2

},

template: '{{ if (a > b) { }} {{ a }} {{ } else { }} {{ b }} {{ } }}
原創文章，作者：AEAJG，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/331850.html