使用基本 SSR 的問(wèn)題

到目前為止，我們假設(shè)打包的服務(wù)器端代碼，將由服務(wù)器通過(guò) require 直接使用：

const createApp = require('/path/to/built-server-bundle.js')

這是理所應(yīng)當(dāng)?shù)?，然而在每次編輯過(guò)應(yīng)用程序源代碼之后，都必須停止并重啟服務(wù)。這在開發(fā)過(guò)程中會(huì)影響開發(fā)效率。此外，Node.js 本身不支持 source map。

傳入 BundleRenderer

vue-server-renderer 提供一個(gè)名為 createBundleRenderer 的 API，用于處理此問(wèn)題，通過(guò)使用 webpack 的自定義插件，server bundle 將生成為可傳遞到 bundle renderer 的特殊 JSON 文件。所創(chuàng)建的 bundle renderer，用法和普通 renderer 相同，但是 bundle renderer 提供以下優(yōu)點(diǎn)：

• 內(nèi)置的 source map 支持（在 webpack 配置中使用 devtool: 'source-map'）

• 在開發(fā)環(huán)境甚至部署過(guò)程中熱重載（通過(guò)讀取更新后的 bundle，然后重新創(chuàng)建 renderer 實(shí)例）

• 關(guān)鍵 CSS(critical CSS) 注入（在使用 *.vue 文件時(shí)）：自動(dòng)內(nèi)聯(lián)在渲染過(guò)程中用到的組件所需的CSS。更多細(xì)節(jié)請(qǐng)查看 CSS 章節(jié)。

• 使用 clientManifest 進(jìn)行資源注入：自動(dòng)推斷出最佳的預(yù)加載(preload)和預(yù)取(prefetch)指令，以及初始渲染所需的代碼分割 chunk。

在下一章節(jié)中，我們將討論如何配置 webpack，以生成 bundle renderer 所需的構(gòu)建工件 (build artifact)，但現(xiàn)在假設(shè)我們已經(jīng)有了這些需要的構(gòu)建工件，以下就是創(chuàng)建和使用 bundle renderer 的方法：

const { createBundleRenderer } = require('vue-server-renderer')


const renderer = createBundleRenderer(serverBundle, {
  runInNewContext: false, // 推薦
  template, // （可選）頁(yè)面模板
  clientManifest // （可選）客戶端構(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)
  })
})

bundle renderer 在調(diào)用 renderToString 時(shí)，它將自動(dòng)執(zhí)行「由 bundle 創(chuàng)建的應(yīng)用程序?qū)嵗顾鶎?dǎo)出的函數(shù)（傳入上下文作為參數(shù)），然后渲染它。

注意，推薦將 runInNewContext 選項(xiàng)設(shè)置為 false 或 'once'。更多細(xì)節(jié)請(qǐng)查看 API 參考。