Vue 服務端渲染技術

尋夢環遊發表於2018-04-24

更好的SEO，由於搜尋引擎爬蟲抓取工具可以直接檢視完全渲染的頁面。
更快的首屏渲染速度。特別是對於網路速度慢或者執行緩慢的裝置，無需等待所有的js都下載和解析完成才渲染頁面，而是在服務端渲染好直接傳送給客戶端渲染頁面。

服務端渲染（SSR） VS 預渲染（Prerendering）

相同點：都是解決單頁面SEO的問題，更快的內容到達時間。
不同點： 1、實現原理和方案不同：SSR的實現依賴於node.js伺服器做服務端構建靜態資源， prerender的實現依賴於webpack整合為prerender-spa-plugin，將靜態資源提取出來展示給前端。 2、服務端渲染可以做到服務端的實時編譯，prerender只是在構建時簡單的生成針對特定路由的靜態HTML檔案，來達到SEO的效果，prerender的優點是配置更簡單，並可以把前端作為一個完全靜態的站點。

Prerender的webpack配置

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  plugins: [
    ...
    new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
}
複製程式碼

服務端渲染原理圖解

SSR實現技術棧

服務端：Nodejs 前端框架 Vue2.0+ 前端構建工具：webpack 程式碼檢查：eslint 原始碼：es6 前端路由：vue-router 狀態管理：vuex 服務端通訊：axios 日誌管理：log4js 專案自動化部署工具：jenkins

服務端渲染一個Vue例項

// 第 1 步：建立一個 Vue 例項
const Vue = require('vue')
const app = new Vue({
  template: `<div>Hello World</div>`
})
// 第 2 步：建立一個 renderer
const renderer = require('vue-server-renderer').createRenderer()
// 第 3 步：將 Vue 例項渲染為 HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err
  console.log(html)
  // => <div data-server-rendered="true">Hello World</div>
})
複製程式碼

整合Express的node服務

const Vue = require('vue')
const server = require('express')()
const renderer = require('vue-server-renderer').createRenderer()
server.get('*', (req, res) => {
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>訪問的 URL 是： {{ url }}</div>`
  })
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    res.end(`
      <!DOCTYPE html>
      <html lang="en">
        <head><title>Hello</title></head>
        <body>${html}</body>
      </html>
    `)
  })
})
server.listen(8080)
複製程式碼

服務端渲染專案目錄結構

app.js 程式碼結構

import Vue from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'
import { sync } from 'vuex-router-sync'
import Element from 'element-ui'
Vue.use(Element)

// sync the router with the vuex store.
// this registers `store.state.route`
sync(store, router)

/**
 * 建立vue例項
 * 在這裡注入 router  store 到所有的子元件
 * 這樣就可以在任何地方使用 `this.$router` and `this.$store`
 * @type {Vue$2}
 */
const app = new Vue({
  router,
  store,
  render: h => h(App)
})

/**
 * 匯出 router and store.
 * 在這裡不需要掛載到app上。這裡和瀏覽器渲染不一樣
 */
export { app, router, store }
複製程式碼

entry-client.js程式碼結構

import 'es6-promise/auto'
import { app, store, router } from './app'

// prime the store with server-initialized state.
// the state is determined during SSR and inlined in the page markup.
if (window.__INITIAL_STATE__) {
  store.replaceState(window.__INITIAL_STATE__)
}

/**
 * 非同步元件
 */
router.onReady(() => {
  // 開始掛載到dom上
  app.$mount('#app')
})

// service worker
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js')
}
複製程式碼

server-entry.js程式碼結構

import { app, router, store } from './app'

const isDev = process.env.NODE_ENV !== 'production'

// This exported function will be called by `bundleRenderer`.
// This is where we perform data-prefetching to determine the
// state of our application before actually rendering it.
// Since data fetching is async, this function is expected to
// return a Promise that resolves to the app instance.
export default context => {
  const s = isDev && Date.now()

  return new Promise((resolve, reject) => {
    // set router's location
    router.push(context.url)

    // wait until router has resolved possible async hooks
    router.onReady(() => {
      const matchedComponents = router.getMatchedComponents()
      // no matched routes
      if (!matchedComponents.length) {
        reject({ code: 404 })
      }
      // Call preFetch hooks on components matched by the route.
      // A preFetch hook dispatches a store action and returns a Promise,
      // which is resolved when the action is complete and store state has been
      // updated.
      Promise.all(matchedComponents.map(component => {
        return component.preFetch && component.preFetch(store)
      })).then(() => {
        isDev && console.log(`data pre-fetch: ${Date.now() - s}ms`)
        // After all preFetch hooks are resolved, our store is now
        // filled with the state needed to render the app.
        // Expose the state on the render context, and let the request handler
        // inline the state in the HTML response. This allows the client-side
        // store to pick-up the server-side state without having to duplicate
        // the initial data fetching on the client.
        context.state = store.state
        resolve(app)
      }).catch(reject)
    })
  })
}
複製程式碼

編寫通用程式碼注意事項

我們的通用程式碼是一套程式碼可以分別在瀏覽器環境和node.js環境跑起來的，所以書寫程式碼有些事情需要注意： 1、服務端渲染過程中只有beforeCreate和created生命週期函式會被呼叫。其他生命週期只能在瀏覽器環境惰性呼叫，node.js 會忽略掉這部分生命週期函式。 2、通用程式碼不可接受特定平臺的 API（比如document、window），使用跨平臺的axios（對瀏覽器和node.js暴露相同的API）做瀏覽器和node.js環境的請求傳送。 3、大多數自定義指令直接操作 DOM，因此會在伺服器端渲染(SSR)過程中導致錯誤

路由和程式碼分割

1、引入vue-router來做頁面的單頁應用 2、程式碼分割：應用程式的程式碼分割或惰性載入，有助於減少瀏覽器在初始渲染中下載的資源體積，可以極大地改善大體積 bundle 的可互動時間 (TTI - time-to-interactive)。這裡的關鍵在於，對初始首屏而言，”只載入所需"。

// 這裡進行修改……
import Foo from './Foo.vue'
// 改為這樣：
const Foo = () => import('./Foo.vue')
複製程式碼

資料預取和狀態

在伺服器端渲染(SSR)期間，我們本質上是在渲染我們應用程式的"快照"，所以如果應用程式依賴於一些非同步資料，那麼在開始渲染過程之前，需要先預取和解析好這些資料。

另一個需要關注的問題是在客戶端，在掛載(mount)到客戶端應用程式之前，需要獲取到與伺服器端應用程式完全相同的資料 - 否則，客戶端應用程式會因為使用與伺服器端應用程式不同的狀態，然後導致混合失敗。

為了解決這個問題，獲取的資料需要位於檢視元件之外，即放置在專門的資料預取儲存容器(data store)或"狀態容器(state container)）"中。首先，在伺服器端，我們可以在渲染之前預取資料，並將資料填充到 store 中。此外，我們將在 HTML 中序列化(serialize)和內聯預置(inline)狀態。這樣，在掛載(mount)到客戶端應用程式之前，可以直接從 store 獲取到內聯預置(inline)狀態。

為此，我們將使用官方狀態管理庫 Vuex。

客戶端混合

所謂客戶端啟用，指的是 Vue 在瀏覽器端接管由服務端傳送的靜態 HTML，使其變為由 Vue 管理的動態 DOM 的過程。如果你檢查伺服器渲染的輸出結果，你會注意到應用程式的根元素有一個特殊的屬性：

<div id="app" data-server-rendered="true">
複製程式碼

data-server-rendered 特殊屬性，讓客戶端 Vue 知道這部分 HTML 是由 Vue 在服務端渲染的，並且應該以啟用模式進行掛載。

在開發模式下，Vue 將推斷客戶端生成的虛擬 DOM 樹 (virtual DOM tree)，是否與從伺服器渲染的 DOM 結構 (DOM structure)匹配。如果無法匹配，它將退出混合模式，丟棄現有的 DOM 並從頭開始渲染。在生產模式下，此檢測會被跳過，以避免效能損耗。

客戶端構建配置

客戶端配置(client config)和基本配置(base config)大體上相同。顯然你需要把 entry 指向你的客戶端入口檔案。除此之外，如果你使用 CommonsChunkPlugin，請確保僅在客戶端配置(client config)中使用，因為伺服器包需要單獨的入口 chunk

const webpack = require('webpack')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.config.js')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
module.exports = merge(baseConfig, {
  entry: '/path/to/entry-client.js',
  plugins: [
    // 重要資訊：這將 webpack 執行時分離到一個引導 chunk 中，
    // 以便可以在之後正確注入非同步 chunk。
    // 這也為你的 應用程式/vendor 程式碼提供了更好的快取。
    new webpack.optimize.CommonsChunkPlugin({
      name: "manifest",
      minChunks: Infinity
    }),
    // 此外掛在輸出目錄中
    // 生成 `vue-ssr-client-manifest.json`。
    new VueSSRClientPlugin()
  ]
})
複製程式碼

服務端構建配置

伺服器配置，是用於生成傳遞給 createBundleRenderer 的 server bundle。它應該是這樣的：

const merge = require('webpack-merge')
const nodeExternals = require('webpack-node-externals')
const baseConfig = require('./webpack.base.config.js')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
module.exports = merge(baseConfig, {
  // 將 entry 指向應用程式的 server entry 檔案
  entry: '/path/to/entry-server.js',
  // 這允許 webpack 以 Node 適用方式(Node-appropriate fashion)處理動態匯入(dynamic import)，
  // 並且還會在編譯 Vue 元件時，
  // 告知 `vue-loader` 輸送面向伺服器程式碼(server-oriented code)。
  target: 'node',
  // 對 bundle renderer 提供 source map 支援
  devtool: 'source-map',
  // 此處告知 server bundle 使用 Node 風格匯出模組(Node-style exports)
  output: {
    libraryTarget: 'commonjs2'
  },
  // https://webpack.js.org/configuration/externals/#function
  // https://github.com/liady/webpack-node-externals
  // 外接化應用程式依賴模組。可以使伺服器構建速度更快，
  // 並生成較小的 bundle 檔案。
  externals: nodeExternals({
    // 不要外接化 webpack 需要處理的依賴模組。
    // 你可以在這裡新增更多的檔案型別。例如，未處理 *.vue 原始檔案，
    // 你還應該將修改 `global`（例如 polyfill）的依賴模組列入白名單
    whitelist: /\.css$/
  }),
  // 這是將伺服器的整個輸出
  // 構建為單個 JSON 檔案的外掛。
  // 預設檔名為 `vue-ssr-server-bundle.json`
  plugins: [
    new VueSSRServerPlugin()
  ]
})
複製程式碼

快取

在大多數情況下，伺服器渲染的應用程式依賴於外部資料，因此本質上頁面內容是動態的，不能持續長時間快取。然而，如果內容不是使用者特定(user-specific)（即對於相同的 URL，總是為所有使用者渲染相同的內容），我們可以利用名為 micro-caching 的快取策略，來大幅度提高應用程式處理高流量的能力。

const microCache = LRU({
  max: 100,
  maxAge: 1000 // 重要提示：條目在 1 秒後過期。
})
const isCacheable = req => {
  // 實現邏輯為，檢查請求是否是使用者特定(user-specific)。
  // 只有非使用者特定(non-user-specific)頁面才會快取
}
server.get('*', (req, res) => {
  const cacheable = isCacheable(req)
  if (cacheable) {
    const hit = microCache.get(req.url)
    if (hit) {
      return res.end(hit)
    }
  }
  renderer.renderToString((err, html) => {
    res.end(html)
    if (cacheable) {
      microCache.set(req.url, html)
    }
  })
})
複製程式碼

流式渲染

對於 vue-server-renderer 的基本 renderer 和 bundle renderer 都提供開箱即用的流式渲染功能。所有你需要做的就是，用 renderToStream 替代 renderToString：

const stream = renderer.renderToStream(context)
複製程式碼

返回的值是 Node.js stream：

let html = ''
stream.on('data', data => {
  html += data.toString()
})
stream.on('end', () => {
  console.log(html) // 渲染完成
})
stream.on('error', err => {
  // handle error...
})
複製程式碼

Nuxt.js

從頭搭建一個服務端渲染的應用是相當複雜的。Nuxt 是一個基於 Vue 生態的更高層的框架，為開發服務端渲染的 Vue 應用提供了極其便利的開發體驗

vue：服務端渲染技術
2018-03-02
Vue服務端
Vue 服務端渲染 & 預渲染
2019-04-01
Vue服務端
Vue 服務端渲染（SSR）
2018-03-05
Vue服務端
Vue 2 服務端渲染初探
2016-08-24
Vue服務端
服務端渲染到前端渲染，再到“服務端渲染”
2019-02-16
服務端前端
vue 服務端渲染折騰記錄
2018-03-09
Vue服務端
3 分鐘搞定 Vue 2.0 服務端渲染
2019-03-03
Vue服務端
服務端渲染和客戶端渲染
2024-04-04
服務端客戶端
react 服務端渲染
2019-05-08
React服務端
Vue SSR服務端渲染之資料快取
2018-07-20
Vue服務端快取
手把手教你搭建 Vue 服務端渲染專案
2020-11-02
Vue服務端
如何理解服務端渲染？
2019-10-09
服務端
服務端渲染基礎
2021-12-07
服務端
基於 Nuxt 的 Vue.js 服務端渲染實踐
2019-03-04
UXVue.js服務端
Vue/React 元件 PHP 服務端渲染（SSR）可行性分析
2018-03-27
VueReact元件PHP服務端
關於Vue服務端渲染（nuxt）的簡單學習
2017-10-13
Vue服務端UX
基於vue-ssr服務端渲染入門詳解
2018-01-08
Vue服務端
實現SSR服務端渲染
2019-03-18
服務端
Angular6 服務端渲染
2019-04-18
Angular服務端
Universal-webpack服務端渲染
2019-02-16
Web服務端
node服務端渲染(完整demo)
2019-01-09
服務端
服務端主動推送技術☞WebSocket
2019-05-25
服務端Web
服務端技術方案模板參考
2023-02-16
服務端
淺談NUXT – 基於vue.js的服務端渲染框架
2019-02-16
UXVue.js服務端框架
Inertia.js SSR | 讓 Laravel x Vue 實現服務端渲染
2022-01-12
JSLaravelVue服務端
普通vue-cli初始專案轉為服務端渲染SSR
2020-11-21
Vue服務端
Vue2服務端渲染實踐以及相關解讀
2017-05-02
Vue服務端
服務端渲染vs客戶端渲染到前後端同構
2017-12-25
服務端客戶端後端
[譯]揭祕 React 服務端渲染
2019-03-03
React服務端
實現ssr服務端渲染demo
2019-08-13
服務端
typescript版的react服務端渲染
2019-02-16
TypeScriptReact服務端
React服務端渲染（專案搭建）
2018-10-10
React服務端
如何用 React 做服務端渲染
2018-12-18
React服務端
nuxt——服務端渲染可選方案
2018-01-27
UX服務端
服務端渲染與 Universal React App
2017-11-10
服務端ReactAPP
react server rendering（服務端渲染）
2016-05-25
ReactServer服務端
Vue教程00：MVC、MVP、MVVM模式的區別，服務端渲染與客戶端渲染的區別
2018-12-08
VueMVCMVPMVVM模式服務端客戶端
凹凸技術揭祕 · 基礎服務體系 · 構築服務端技術中樞
2021-01-15
服務端