Vue.js 2.0 服務(wù)端渲染

2022-01-28 15:34 更新

需要服務(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)畫，然后內(nèi)容通過(guò)ajax獲取，那爬蟲不會(huì)等待他們加載完成。

這意味著在異步獲取內(nèi)容的頁(yè)面上很需要進(jìn)行搜索引擎優(yōu)化的時(shí)候，服務(wù)端渲染就很重要。

客戶端的網(wǎng)絡(luò)比較慢

用戶可能在網(wǎng)絡(luò)比較慢的情況下從遠(yuǎn)處訪問(wèn)網(wǎng)站 - 或者通過(guò)比較差的帶寬。這些情況下，盡量減少頁(yè)面請(qǐng)求數(shù)量，來(lái)保證用戶盡快看到基本的內(nèi)容。

可以用Webpack的代碼拆分避免強(qiáng)制用戶下載整個(gè)單頁(yè)面應(yīng)用，但是，這樣也遠(yuǎn)沒(méi)有下載個(gè)單獨(dú)的預(yù)先渲染過(guò)的HTML文件性能高。

客戶端運(yùn)行在老的(或者直接沒(méi)有)JavaScript引擎上

對(duì)于世界上的一些地區(qū)人，可能只能用1998年產(chǎn)的電腦訪問(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)銷頁(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)
  // => <p server-rendered="true">hello world</p>
})

這并不困難。當(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)用告訴用戶他們?cè)谝粋€(gè)頁(yè)面上花了多少時(shí)間。

new Vue({
  template: '<div>你已經(jīng)在這花了 {{ counter }} 秒。</div>',
  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è)工廠函數(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"上，這樣客戶端可以加載它。
    return new Vue({
      template: '<div id="app">你已經(jīng)在這花了 {{ counter }} 秒。</div>',
      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文件。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>My Vue App</title>
  <script src="/assets/vue.js"></script>
</head>
<body>
  <div id="app"></div>
  <script src="/assets/app.js"></script>
  <script>app.$mount('#app')</script>
</body>
</html>

主要引用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)
        // 告訴客戶端錯(cuò)誤
        return response
          .status(500)
          .send('Server Error')
      }
      // 發(fā)送布局和HTML文件
      response.send(layout.replace('<div id="app"></div>', 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è)面資源（或類似操作）確認(rèn)服務(wù)選渲染真的運(yùn)行了?？梢栽赽ody中看到：

<div id="app" server-rendered="true">You have been here for 0 seconds.</div>

代替：

<div id="app"></div>

流式響應(yīng)

Vue還支持流式渲染，優(yōu)先選擇適用于支持流的Web服務(wù)器。允許HTML一邊生成一般寫入相應(yīng)流，而不是在最后一次全部寫入。其結(jié)果是請(qǐng)求服務(wù)速度更快，沒(méi)有缺點(diǎn)！

為了使上一節(jié)應(yīng)用代碼適用流式渲染，可以簡(jiǎn)單的替換 server.get('*',...)為下面的代碼：

// 拆分布局成兩段HTML
var layoutSections = layout.split('<div id="app"></div>')
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寫入響應(yīng)
  response.write(preAppHTML)
  // 每當(dāng)新的塊被渲染
  stream.on('data', function (chunk) {
    // 將塊寫入響應(yīng)
    response.write(chunk)
  })
  // 當(dāng)所有的塊被渲染完成
  stream.on('end', function () {
    // 將post-app HTML寫入響應(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è)新概念。我們做了：

  1. 建立流
  2. 在應(yīng)用響應(yīng)前寫入HTML
  3. 在可獲得時(shí)將應(yīng)用HTML寫入響應(yīng)
  4. 在響應(yīng)最后寫入HTML
  5. 處理任何錯(cuò)誤

組件緩存

Vue的服務(wù)端渲染默認(rèn)非常快，但是你可以通過(guò)緩存渲染好的組件進(jìn)一步提高性能。這被認(rèn)為是一種先進(jìn)的功能，但是，如果緩存了錯(cuò)誤的組件（或者正確的組件帶有錯(cuò)誤的內(nèi)容）將導(dǎo)致應(yīng)用渲染出錯(cuò)。特別注意：

不應(yīng)該緩存組件包含子組件依賴全局狀態(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: '<li>{{ item.name }}</li>',
  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ù)端渲染，我們推薦深度熟悉以下資源：

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)