vue SSR 服務(wù)端渲染記錄

villainhr 發(fā)布于2019-08-21 17:55 / 3484人閱讀

摘要：前幾天了解了下服務(wù)端渲染的流程，記錄下。現(xiàn)在我們的服務(wù)器與應(yīng)用程序已經(jīng)解耦處理異常服務(wù)端渲染一些坑對(duì)象找不到，由于前端使用的，在環(huán)境不存在數(shù)據(jù)預(yù)獲取時(shí)，組件尚未實(shí)例化無(wú)法使用，數(shù)據(jù)請(qǐng)求及格式化等操作都應(yīng)該放置在處理

前幾天了解了下vue 服務(wù)端渲染的流程，記錄下。首先，什么是ssr(服務(wù)端渲染 Server Side Rendering)，為什么需要？

服務(wù)端渲染是什么

前后端分離之后，頁(yè)面加載的流程是，前端異步請(qǐng)求拿到數(shù)據(jù)渲染頁(yè)面。服務(wù)端渲染就是在后端把數(shù)據(jù)取好，拼好頁(yè)面的DOM樹(shù)發(fā)給前端，到瀏覽器解析渲染。有沒(méi)有想到前后端分離之前，由后端把數(shù)據(jù)塞進(jìn)模版，前端負(fù)責(zé)顯示的過(guò)去。（有沒(méi)有種天下之勢(shì)，合久必分，分久必合的感慨哈哈哈哈哈)

服務(wù)端渲染優(yōu)點(diǎn)

頁(yè)面的SEO, 異步拿數(shù)據(jù)顯示對(duì)爬蟲(chóng)不友好

首屏渲染速度快，更好的用戶(hù)體驗(yàn)

服務(wù)端渲染原理

接下來(lái)，介紹下vue 服務(wù)端實(shí)現(xiàn)原理及流程。

SSR 有兩個(gè)入口文件client-entry，server-entry , webpack打包之后，生成 server-bundle, client-bundle

服務(wù)器收到瀏覽器的請(qǐng)求，創(chuàng)建一個(gè)bundleRenderer,讀取1生成的server-bundle，執(zhí)行代碼（具體做了什么后面會(huì)講到），生成html發(fā)送到前端

把第二步生成的html跟前端的client-bundle進(jìn)行混合（hydrate），混合時(shí)判斷client-bundle 的DOM節(jié)點(diǎn)跟服務(wù)端返回的html里DOM節(jié)點(diǎn)是否相同，是的話掛載（vue中的$mount）到這個(gè)節(jié)點(diǎn)上，頁(yè)面渲染完畢

用白話形容，服務(wù)端獲取頁(yè)面所需的數(shù)據(jù)之后，拼出html，把html轉(zhuǎn)成string發(fā)送到前端，前端把html插入到指定節(jié)點(diǎn)，渲染頁(yè)面，OK了。

服務(wù)端數(shù)據(jù)預(yù)取

看看官網(wǎng)的demo,服務(wù)端怎么做的服務(wù)端數(shù)據(jù)預(yù)取。

// entry-server.js
import { createApp } from "./app"
export default context => {
  return new Promise((resolve, reject) => {
    const { app, router, store } = createApp()
    router.push(context.url)
     // 等到 router 將可能的異步組件和鉤子函數(shù)解析完
    router.onReady(() => {
      //獲取相匹配的組件
      const matchedComponents = router.getMatchedComponents()
      if (!matchedComponents.length) {
        return reject({ code: 404 })
      }
      // 對(duì)所有匹配的路由組件調(diào)用 `asyncData()`
      Promise.all(matchedComponents.map(Component => {
        if (Component.asyncData) {
          return Component.asyncData({
            store,
            route: router.currentRoute
          })
        }
      })).then(() => {
        // 在所有預(yù)取鉤子(preFetch hook) resolve 后，
        // 我們的 store 現(xiàn)在已經(jīng)填充入渲染應(yīng)用程序所需的狀態(tài)。
        // 當(dāng)我們將狀態(tài)附加到上下文，
        // 并且 `template` 選項(xiàng)用于 renderer 時(shí)，
        // 狀態(tài)將自動(dòng)序列化為 `window.__INITIAL_STATE__`，并注入 HTML。
        context.state = store.state
        resolve(app)
      }).catch(reject)
    }, reject)
  })
}

根據(jù)router拿出相匹配的組件，客戶(hù)端定義asyncData（數(shù)據(jù)預(yù)取函數(shù)，拿數(shù)據(jù)），服務(wù)端asyncData，獲取數(shù)據(jù)

把源數(shù)據(jù)和狀態(tài)寫(xiě)進(jìn)store（數(shù)據(jù)和狀態(tài)存儲(chǔ)容器，store獨(dú)立于業(yè)務(wù)組件，詳情可查看Vuex），避免客戶(hù)端和服務(wù)端狀態(tài)不對(duì)等。狀態(tài)寫(xiě)進(jìn)window.__INITIAL_STATE__格式，客戶(hù)端可拿到

bundleRenderder

html渲染好之后，轉(zhuǎn)成string發(fā)到客戶(hù)端，客戶(hù)端插入到對(duì)應(yīng)DOM節(jié)點(diǎn)下就可以啦～

const { createBundleRenderer } = require("vue-server-renderer")
const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推薦
  template, // （可選）頁(yè)面模板
  clientManifest // （可選）客戶(hù)端構(gòu)建 manifest
})
// 在服務(wù)器處理函數(shù)中……
server.get("*", (req, res) => {
  const context = { url: req.url }
  // 這里無(wú)需傳入一個(gè)應(yīng)用程序，因?yàn)樵趫?zhí)行 bundle 時(shí)已經(jīng)自動(dòng)創(chuàng)建過(guò)。
  // 現(xiàn)在我們的服務(wù)器與應(yīng)用程序已經(jīng)解耦！
  renderer.renderToString(context, (err, html) => {
    // 處理異常……
    res.end(html)
  })
}

服務(wù)端渲染一些坑

document 對(duì)象找不到，由于前端使用的 window，在 node 環(huán)境不存在

數(shù)據(jù)預(yù)獲取時(shí)，組件尚未實(shí)例化（無(wú)法使用 this ），數(shù)據(jù)請(qǐng)求及格式化等操作都應(yīng)該放置在store處理