建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
需要服務(wù)端渲染（SSR）嗎？
在開(kāi)始服務(wù)端渲染前，我們先看看它能給我們帶來(lái)什么，以及什么時(shí)候需要用它。
SEO（搜索引擎優(yōu)化）
谷歌和Bing可以很好地索引同步的JavaScript應(yīng)用。同步在這里是個(gè)關(guān)鍵詞。如果應(yīng)用啟動(dòng)時(shí)有一個(gè)加載動(dòng)畫(huà)，然后內(nèi)容通過(guò)ajax獲取，那爬蟲(chóng)不會(huì)等待他們加載完成。
這意味著在異步獲取內(nèi)容的頁(yè)面上很需要進(jìn)行搜索引擎優(yōu)化的時(shí)候，服務(wù)端渲染就很重要。
客戶(hù)端的網(wǎng)絡(luò)比較慢
用戶(hù)可能在網(wǎng)絡(luò)比較慢的情況下從遠(yuǎn)處訪(fǎng)問(wèn)網(wǎng)站 - 或者通過(guò)比較差的帶寬。這些情況下，盡量減少頁(yè)面請(qǐng)求數(shù)量，來(lái)保證用戶(hù)盡快看到基本的內(nèi)容。
可以用Webpack的代碼拆分避免強(qiáng)制用戶(hù)下載整個(gè)單頁(yè)面應(yīng)用，但是，這樣也遠(yuǎn)沒(méi)有下載個(gè)單獨(dú)的預(yù)先渲染過(guò)的HTML文件性能高。
客戶(hù)端運(yùn)行在老的(或者直接沒(méi)有)JavaScript引擎上
對(duì)于世界上的一些地區(qū)人，可能只能用1998年產(chǎn)的電腦訪(fǎng)問(wèn)互聯(lián)網(wǎng)的方式使用計(jì)算機(jī)。而Vue只能運(yùn)行在IE9以上的瀏覽器，你可以也想為那些老式瀏覽器提供基礎(chǔ)內(nèi)容 - 或者是在命令行中使用 Lynx的時(shí)髦的黑客。
服務(wù)端渲染 對(duì)比 預(yù)渲染(Prerendering)
如果你只是用服務(wù)端渲染來(lái)改善一個(gè)少數(shù)的營(yíng)銷(xiāo)頁(yè)面（如 首頁(yè)，關(guān)于，聯(lián)系 等等）的SEO，那你可以用預(yù)渲染替換。預(yù)渲染不像服務(wù)器渲染那樣即時(shí)編譯HTML,預(yù)渲染只是在構(gòu)建時(shí)為了特定的路由生成特定的幾個(gè)靜態(tài)頁(yè)面。其優(yōu)勢(shì)是預(yù)渲染的設(shè)置更加簡(jiǎn)單，可以保持前端是一個(gè)完整的靜態(tài)站。
你用webpack可以很簡(jiǎn)單地通過(guò)prerender-spa-plugin來(lái)添加預(yù)渲染，它被廣泛地用在Vue應(yīng)用上 - 事實(shí)上，創(chuàng)建者也是Vue核心團(tuán)隊(duì)成員之一。
Hello World
準(zhǔn)備在行動(dòng)中體驗(yàn)服務(wù)端渲染吧。服務(wù)端渲染(即SSR)聽(tīng)起來(lái)很復(fù)雜，不過(guò)一個(gè)簡(jiǎn)單的Node腳本只需要3步就可以實(shí)現(xiàn)這個(gè)功能：
// 步驟 1:創(chuàng)建一個(gè)Vue實(shí)例
var Vue = require('vue')
var app = new Vue({
render: function (h) {
return h('p', 'hello world')
}
})
// 步驟 2: 創(chuàng)建一個(gè)渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 步驟 3: 將 Vue實(shí)例 渲染成 HTML
renderer.renderToString(app, function (error, html) {
if (error) throw error
console.log(html)
// => hello world
})這并不困難。當(dāng)然這個(gè)示例比大部分應(yīng)用都簡(jiǎn)單。我們不必?fù)?dān)心：
- 一個(gè)Web服務(wù)器
- 流式響應(yīng)
- 組件緩存
- 構(gòu)建過(guò)程
- 路由
- Vuex狀態(tài)管理
這個(gè)指南的其余部分，我們將探討這些功能怎樣運(yùn)作。一旦你理解了基礎(chǔ)，我們會(huì)提供更多細(xì)節(jié)和進(jìn)一步的示例來(lái)幫助你解決意外情況。
通過(guò)Express Web服務(wù)器實(shí)現(xiàn)簡(jiǎn)單的服務(wù)端渲染
如果沒(méi)有一個(gè)Web服務(wù)器，很難說(shuō)是服務(wù)端渲染，所以我們來(lái)補(bǔ)充它。我們將構(gòu)建一個(gè)非常簡(jiǎn)單的服務(wù)端渲染應(yīng)用，只用ES5，也不帶其他構(gòu)建步驟或Vue插件。
啟動(dòng)一個(gè)應(yīng)用告訴用戶(hù)他們?cè)谝粋€(gè)頁(yè)面上花了多少時(shí)間。
new Vue({
template: '你已經(jīng)在這花了 {{ counter }} 秒。',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})為了適應(yīng)服務(wù)端渲染，我們需要進(jìn)行一些修改，讓它可以在瀏覽器和Node中渲染：
- 在瀏覽器中，將我們的應(yīng)用實(shí)例添加到全局上下文（ window）上,我們可以安裝它。
- 在Node中，導(dǎo)出一個(gè)工廠(chǎng)函數(shù)讓我們可以為每個(gè)請(qǐng)求創(chuàng)建應(yīng)用實(shí)例。
實(shí)現(xiàn)這個(gè)需要一點(diǎn)模板：
// assets/app.js
(function () { 'use strict'
var createApp = function () {
// ---------------------
// 開(kāi)始常用的應(yīng)用代碼
// ---------------------
// 主要的Vue實(shí)例必須返回，并且有一個(gè)根節(jié)點(diǎn)在id "app"上，這樣客戶(hù)端可以加載它。
return new Vue({
template: '你已經(jīng)在這花了 {{ counter }} 秒。',
data: {
counter: 0
},
created: function () {
var vm = this
setInterval(function () {
vm.counter += 1
}, 1000)
}
})
// -------------------
// 結(jié)束常用的應(yīng)用代碼
// -------------------
}
if (typeof module !== 'undefined' && module.exports) {
module.exports = createApp
} else {
this.app = createApp()
}
}).call(this)現(xiàn)在有了應(yīng)用代碼，接著加一個(gè) html文件。
My Vue App
主要引用assets文件夾中我們先前創(chuàng)建的app.js，以及vue.js文件，我們就有了一個(gè)可以運(yùn)行的單頁(yè)面應(yīng)用
然后為了實(shí)現(xiàn)服務(wù)端渲染，在服務(wù)端需要加一個(gè)步驟。
// server.js
'use strict'
var fs = require('fs')
var path = require('path')
// 定義全局的Vue為了服務(wù)端的app.js
global.Vue = require('vue')
// 獲取HTML布局
var layout = fs.readFileSync('./index.html', 'utf8')
// 創(chuàng)建一個(gè)渲染器
var renderer = require('vue-server-renderer').createRenderer()
// 創(chuàng)建一個(gè)Express服務(wù)器
var express = require('express')
var server = express()
// 部署靜態(tài)文件夾為 "assets"文件夾
server.use('/assets', express.static(
path.resolve(__dirname, 'assets')
))
// 處理所有的Get請(qǐng)求
server.get('*', function (request, response) {
// 渲染我們的Vue應(yīng)用為一個(gè)字符串
renderer.renderToString(
// 創(chuàng)建一個(gè)應(yīng)用實(shí)例
require('./assets/app')(),
// 處理渲染結(jié)果
function (error, html) {
// 如果渲染時(shí)發(fā)生了錯(cuò)誤
if (error) {
// 打印錯(cuò)誤到控制臺(tái)
console.error(error)
// 告訴客戶(hù)端錯(cuò)誤
return response
.status(500)
.send('Server Error')
}
// 發(fā)送布局和HTML文件
response.send(layout.replace('', html))
}
)
})
// 監(jiān)聽(tīng)5000端口
server.listen(5000, function (error) {
if (error) throw error
console.log('Server is running at localhost:5000')
})這樣就完成了。整個(gè)示例，克隆下來(lái)深度實(shí)驗(yàn)。一旦它在本地運(yùn)行時(shí)，你可以通過(guò)在頁(yè)面右擊選擇頁(yè)面資源（或類(lèi)似操作）確認(rèn)服務(wù)選渲染真的運(yùn)行了。可以在body中看到：
You have been here for 0 seconds.代替：
流式響應(yīng)
Vue還支持流式渲染，優(yōu)先選擇適用于支持流的Web服務(wù)器。允許HTML一邊生成一般寫(xiě)入相應(yīng)流，而不是在最后一次全部寫(xiě)入。其結(jié)果是請(qǐng)求服務(wù)速度更快，沒(méi)有缺點(diǎn)！
為了使上一節(jié)應(yīng)用代碼適用流式渲染，可以簡(jiǎn)單的替換 server.get('*',...)為下面的代碼：
// 拆分布局成兩段HTML
var layoutSections = layout.split('')
var preAppHTML = layoutSections[0]
var postAppHTML = layoutSections[1]
// 處理所有的Get請(qǐng)求
server.get('*', function (request, response) {
// 渲染我們的Vue實(shí)例作為流
var stream = renderer.renderToStream(require('./assets/app')())
// 將預(yù)先的HTML寫(xiě)入響應(yīng)
response.write(preAppHTML)
// 每當(dāng)新的塊被渲染
stream.on('data', function (chunk) {
// 將塊寫(xiě)入響應(yīng)
response.write(chunk)
})
// 當(dāng)所有的塊被渲染完成
stream.on('end', function () {
// 將post-app HTML寫(xiě)入響應(yīng)
response.end(postAppHTML)
})
// 當(dāng)渲染時(shí)發(fā)生錯(cuò)誤
stream.on('error', function (error) {
// 打印錯(cuò)誤到控制臺(tái)
console.error(error)
// 告訴客服端發(fā)生了錯(cuò)誤
return response
.status(500)
.send('Server Error')
})
})這不比之前的版本復(fù)雜，甚至這對(duì)你來(lái)說(shuō)都不是個(gè)新概念。我們做了：
- 建立流
- 在應(yīng)用響應(yīng)前寫(xiě)入HTML
- 在可獲得時(shí)將應(yīng)用HTML寫(xiě)入響應(yīng)
- 在響應(yīng)最后寫(xiě)入HTML
- 處理任何錯(cuò)誤
組件緩存
Vue的服務(wù)端渲染默認(rèn)非?？欤悄憧梢酝ㄟ^(guò)緩存渲染好的組件進(jìn)一步提高性能。這被認(rèn)為是一種先進(jìn)的功能，但是，如果緩存了錯(cuò)誤的組件（或者正確的組件帶有錯(cuò)誤的內(nèi)容）將導(dǎo)致應(yīng)用渲染出錯(cuò)。特別注意：
不應(yīng)該緩存組件包含子組件依賴(lài)全局狀態(tài)（例如來(lái)自vuex的狀態(tài)）。如果這么做，子組件（事實(shí)上是整個(gè)子樹(shù)）也會(huì)被緩存。所以要特別注意帶有slots片段或者子組件的情況。
設(shè)置
在警告情況之外的，我們可以用下面的方法緩存組件。
首先，你需要提供給渲染器一個(gè) 緩存對(duì)象。這有個(gè)簡(jiǎn)單的示例使用 lru-cache
var createRenderer = require('vue-server-renderer').createRenderer
var lru = require('lru-cache')
var renderer = createRenderer({
cache: lru(1000)
})這將緩存高達(dá)1000個(gè)獨(dú)立的渲染。對(duì)于更進(jìn)一步緩存到內(nèi)容中的配置，看lru-cache設(shè)置
然后對(duì)于你想緩存的組件，你可以為他們提供：
- 一個(gè)唯一的名字
- 一個(gè) serverCacheKey函數(shù)，返回一個(gè)唯一的組件作用域
例如：
Vue.component({
name: 'list-item',
template: '{{ item.name }} ',
props: ['item'],
serverCacheKey: function (props) {
return props.item.type + '::' + props.item.id
}
})緩存的理想組件
任何純組件可以被安全緩存 - 這是保證給任何組件傳遞一樣的數(shù)據(jù)產(chǎn)生相同的HTML。這些場(chǎng)景的例子包括：
- 靜態(tài)的組件 (例如 總是嘗試一樣的HTML,所以 serverCacheKey 函數(shù)可以被返回 true)
- 列表組件（當(dāng)有大量列表，緩存他們可以改善性能）
- 通用UI組件 (例如 buttons, alerts, 等等 - 至少他們通過(guò)props獲取數(shù)據(jù)而不是 slots或者子組件)
構(gòu)建過(guò)程，路由，和Vuex狀態(tài)管理
現(xiàn)在，應(yīng)該理解服務(wù)端渲染背后的基本概念了。但是，構(gòu)建過(guò)程、路由、Vuex每一個(gè)都有自己的注意事項(xiàng)。
要真正掌握復(fù)雜應(yīng)用下的服務(wù)端渲染，我們推薦深度熟悉以下資源：
- vue-server-renderer 文檔:更多細(xì)節(jié)在這里，和更多先進(jìn)的主題一起的文檔。 例如 preventing cross-request contamination 和 添加獨(dú)立的服務(wù)構(gòu)建
- vue-hackernews-2.0: 明確整合了 所有主要的Vue庫(kù)和概念在單個(gè)應(yīng)用中
網(wǎng)站名稱(chēng)：創(chuàng)新互聯(lián)VUE2教程：Vue.js2.0服務(wù)端渲染
標(biāo)題來(lái)源：http://www.dlmjj.cn/article/djssihg.html
