怎樣實現(xiàn)服務(wù)器端渲染？

服務(wù)端渲染的實現(xiàn)，通常有3種方式，第1種是手動進行項目的簡單搭建，第2種是使用vue CLI 3腳手架進行搭建，第3種利用一些成熟框架來搭建(如Nuxt,js），本節(jié)講解第1種和第2種方式，帶領(lǐng)讀者實現(xiàn)簡單的服務(wù)器端渲染。

1.創(chuàng)建 vue-ssr項目

在C:\vue\chapter08目錄中，使用命令行工具創(chuàng)建一個vue-ssr項目，具體命令如下:

mkdir vue-ssr

cd vue-ssr

npm init  -y

執(zhí)行上述命令后，會在vue-ssr 目錄下生成一個package.json文件。

在Vue中使用服務(wù)器端渲染，需要借助Vue的擴展模塊vue-server-renderer。下面我們在vue-ssr項目中使用npm來安裝vue-server-renderer,具體命令如下:

npm install vue@2.6.x vue-server-renderer@2.6.X --save

vue-server-renderer是Vue中處理服務(wù)器加載的一個模塊,給Vue提供在Node.js服務(wù)器端渲染的功能。vue-server-renderer依賴-些Node.js原生模塊，所以目前只能在Node.js中使用。

2.Vue渲染

將vue-server-renderer安裝完成后，創(chuàng)建服務(wù)器腳本文件test.js,實現(xiàn)將Vue實例的渲染結(jié)果輸出到控制臺中，具體代碼如下:

 //①創(chuàng)建一個Vue實例

 const Vue = require('vue')

  const app = new Vue({

template: '<div>SSR 的簡單使用</div>'
//② 創(chuàng)建一個renderer實例
const renderer = require ('vue-server-renderer').createRendere()

//③將Vue實例渲染為HTML

renderer.renderToString(app, (err, html) => {

if (err) {

throw err
}

console.log(html)

})

在命令行中執(zhí)行node test.js,運行結(jié)果如下所示:

<div data-server-rendered="true">SSR的簡單使用</div>

從上述結(jié)果可以看出，在<div>標簽中添加了一個特殊的屬性data-server-rendered,該屬性是告訴客戶端的Vue這個標簽是由服務(wù)器渲染的。

猜你喜歡：

什么是服務(wù)器端渲染？它有哪些優(yōu)點和不足？

瀏覽器渲染頁面流程的4個步驟

什么是客戶端渲染？

傳智教育web前端高級軟件工程師課程