【拓展】1324- 服務(wù)端渲染SSR及實(shí)現(xiàn)原理
在日常前端開發(fā)中，在需要首屏渲染速度優(yōu)化的場(chǎng)景下，大家或多或少都聽到過服務(wù)端渲染( SSR )。本文將結(jié)合 Vue 來對(duì) SSR 的實(shí)現(xiàn)邏輯來進(jìn)行解讀。通過閱讀本文你將了解到:
服務(wù)端渲染的使用場(chǎng)景 Vue SSR 的實(shí)現(xiàn)原理 可開箱即用的 SSR 腳手架
服務(wù)端渲染
服務(wù)端渲染 SSR (Server-Side Rendering)，是指在服務(wù)端完成頁面的 html 拼接處理， 然后再發(fā)送給瀏覽器，將不具有交互能力的 html 結(jié)構(gòu)綁定事件和狀態(tài)，在客戶端展示為具有完整交互能力的應(yīng)用程序。
適用場(chǎng)景
以下兩種情況 SSR 可以提供很好的場(chǎng)景支持
需更好的支持 SEO
優(yōu)勢(shì)在于同步。搜索引擎爬蟲是不會(huì)等待異步請(qǐng)求數(shù)據(jù)結(jié)束后再抓取信息的，如果 SEO 對(duì)應(yīng)用程序至關(guān)重要，但你的頁面又是異步請(qǐng)求數(shù)據(jù)，那 SSR 可以幫助你很好的解決這個(gè)問題。
需更快的到達(dá)時(shí)間
優(yōu)勢(shì)在于慢網(wǎng)絡(luò)和運(yùn)行緩慢的設(shè)備場(chǎng)景。傳統(tǒng) SPA 需完整的 JS 下載完成才可執(zhí)行，而SSR 服務(wù)器渲染標(biāo)記在服務(wù)端渲染 html 后即可顯示，用戶會(huì)更快的看到首屏渲染頁面。如果首屏渲染時(shí)間轉(zhuǎn)化率對(duì)應(yīng)用程序至關(guān)重要，那可以使用 SSR 來優(yōu)化。
不適用場(chǎng)景
以下三種場(chǎng)景 SSR 使用需要慎重
同構(gòu)資源的處理
劣勢(shì)在于程序需要具有通用性。結(jié)合 Vue 的鉤子來說，能在 SSR 中調(diào)用的生命周期只有 beforeCreate 和 created，這就導(dǎo)致在使用三方 API 時(shí)必須保證運(yùn)行不報(bào)錯(cuò)。在三方庫的引用時(shí)需要特殊處理使其支持服務(wù)端和客戶端都可運(yùn)行。
部署構(gòu)建配置資源的支持
劣勢(shì)在于運(yùn)行環(huán)境單一。程序需處于 node.js server 運(yùn)行環(huán)境。
服務(wù)器更多的緩存準(zhǔn)備
劣勢(shì)在于高流量場(chǎng)景需采用緩存策略。應(yīng)用代碼需在雙端運(yùn)行解析，cpu 性能消耗更大，負(fù)載均衡和多場(chǎng)景緩存處理比 SPA 做更多準(zhǔn)備。
我們來結(jié)合 Vue.js 來看看 Vue 是如何實(shí)現(xiàn) SSR 的。
Vue SSR 的實(shí)現(xiàn)原理
先決條件
組件基于 Vnode 來實(shí)現(xiàn)渲染
VNode 本身是 js 對(duì)象，兼容性極強(qiáng)，不依賴當(dāng)前的執(zhí)行的環(huán)境，從而可以在服務(wù)端渲染及原生渲染。虛擬 DOM 頻繁修改，最后比較出真實(shí) DOM 需要更改的地方，可以達(dá)到局部渲染的目的，減少性能損耗。
vue-server-renderer
是一個(gè)具有獨(dú)立渲染應(yīng)用程序能力的包，是 Vue 服務(wù)端渲染的核心代碼。
本文下面的源碼也結(jié)合這個(gè)包展開，此處不多冗余介紹。
SSR 渲染架構(gòu)
我們結(jié)合官網(wǎng)圖和項(xiàng)目架構(gòu)兩個(gè)維度來整體了解一下 SSR 全貌
項(xiàng)目架構(gòu)
src
├──?components
├──?App.vue
├──?app.js?----通用?entry
├──?entry-client.js?----僅運(yùn)行于瀏覽器
└──?entry-server.js?----僅運(yùn)行于服務(wù)器
app.js導(dǎo)出 createApp 函數(shù)工廠，此函數(shù)是可以被重復(fù)執(zhí)行的，從根 Vue 實(shí)例注入，用于創(chuàng)建 router，store 以及應(yīng)用程序?qū)嵗?/p>
import?Vue?from?'vue'
import?App?from?'./App.vue'
//?導(dǎo)出一個(gè)工廠函數(shù)，用于創(chuàng)建新的應(yīng)用程序、router?和?store?實(shí)例
export?function?createApp?()?{
??const?app?=?new?Vue({
????render:?h?=>?h(App)
??})
??return?{?app?}
}
entry-client.js負(fù)責(zé)創(chuàng)建應(yīng)用程序，掛載實(shí)例 DOM ，僅運(yùn)行于瀏覽器。
import?{?createApp?}?from?'./app'
const?{?app?}?=?createApp()
//?#app?為根元素，名稱可替換
app.$mount('#app')
entry-server.js創(chuàng)建返回應(yīng)用實(shí)例，同時(shí)還會(huì)進(jìn)行路由匹配和數(shù)據(jù)的預(yù)處理，僅運(yùn)行于服務(wù)器。
import?{?createApp?}?from?'./app'
export?default?context?=>?{
??const?{?app?}?=?createApp()
??return?app
}
服務(wù)端和客戶端代碼編寫原則
作為同構(gòu)框架，應(yīng)用代碼編譯過程 Vue SSR 提供了兩個(gè)編譯入口，來作為抹平由于環(huán)境不同的代碼差異。Client entry 和 Server entry 中編寫代碼邏輯的區(qū)分有兩條原則
通用型代碼 可通用性的代碼，由于鑒權(quán)邏輯和網(wǎng)關(guān)配置不同，需要在 webpack resolve.alias 中配置不同的模塊環(huán)境應(yīng)用。
非通用性代碼 Client entry ?負(fù)責(zé)掛載 DOM 節(jié)點(diǎn)代碼，以及三方包引入和具有兼容性庫的加載。
Server entry 只生成 Vue 對(duì)象。
兩個(gè)編譯產(chǎn)物
經(jīng)過 webpack 打包之后會(huì)有兩個(gè) bundle 產(chǎn)物
server bundle 用于生成 vue-ssr-server-bundle.json，我們熟悉的 sourceMap 和需要在服務(wù)端運(yùn)行的代碼列表都在這個(gè)產(chǎn)物中。
vue-SSR-server-bundle.json
{?
??"entry":?,?
??"files":?{
??? A：包含了所有要在服務(wù)端運(yùn)行的代碼列表
??? B：入口文件
??}?
}
client Bundle 用于生成 vue-SSR-client-manifest.json，包含所有的靜態(tài)資源，首次渲染需要加載的 script 標(biāo)簽，以及需要在客戶端運(yùn)行的代碼。
vue-SSR-client-manifest.json
{?
??"publicPath":?公共資源路徑文件地址,?
??"all":?資源列表
??"initial":輸出?html?字符串
??"async":?異步加載組件集合
??"modules":?moduleIdentifier?和?all?數(shù)組中文件的映射關(guān)系
}
在先決條件中我們提到了一個(gè)重要的包 vue-server-renderer，那我們來重點(diǎn)看看這個(gè)包里面的值得我們學(xué)習(xí)關(guān)注的內(nèi)容。
vue-server-renderer
是 Vue SSR 的核心代碼，值得我們關(guān)注的是應(yīng)用初始化和應(yīng)用輸出。兩個(gè)階段提供了完整的應(yīng)用層代碼編譯和組裝邏輯。
應(yīng)用初始化
在應(yīng)用初始化過程中，重點(diǎn)展開介紹實(shí)例化流程和防止交叉污染。
首先我們先來看看一個(gè) Vue SSR 的應(yīng)用是如何被初始化的。
實(shí)例化流程
生成 Vue 對(duì)象
const?Vue?=?require('vue')
const?app?=?new?Vue()
生成 renderer，值得關(guān)注的兩個(gè)對(duì)象 render 和 templateRenderer
const?renderer?=?require('vue-server-renderer').createRenderer()
// createRenderer 函數(shù)中有兩個(gè)重要的對(duì)象：render 和 templateRenderer
function?createRenderer?(ref)?{
??//?render:?渲染?html?組件
??var?render?=?createRenderFunction(modules,?directives,?isUnaryTag,?cache);
??//?templateRenderer:?模版渲染，clientManifest?文件
??var?templateRenderer?=?new?TemplateRenderer({
????template:?template,
????inject:?inject,
????shouldPreload:?shouldPreload,
????shouldPrefetch:?shouldPrefetch,
????clientManifest:?clientManifest,
????serializer:?serializer
??});
經(jīng)過這個(gè)過程的 render 和 templateRenderer 并沒有被調(diào)用，這兩個(gè)函數(shù)真正的調(diào)用是在項(xiàng)目實(shí)例化 createBundleRenderer 函數(shù)的時(shí)候，即第三步創(chuàng)建的函數(shù)。
創(chuàng)建沙盒 vm，實(shí)例化 Vue 的入口文件
var?vm?=?require('vm');
//?調(diào)用?createBundleRunner?函數(shù)實(shí)例對(duì)象，rendererOptions?支持可配置
var?run?=?createBundleRunner(?
??entry,?----入口文件集合
??files,?----打包文件集合
??basedir,?
? rendererOptions.runInNewContext。
);}
在 createBundleRunner 方法的源碼到其實(shí)舉例了一個(gè)叫 compileModule 的一個(gè)方法，這個(gè)方法中有兩個(gè)函數(shù)：getCompiledScript 和 evaluateModule
function?createBundleRunner?(entry,?files,?basedir,?runInNewContext)?{
??//觸發(fā)?compileModule?方法，找到?webpack?編譯形成的?code
??var?evaluate?=?compileModule(files,?basedir,?runInNewContext);
}
getCompiledScript：編譯 wrapper ，找到入口文件的 files 文件名及 script 腳本的編譯執(zhí)行
function?getCompiledScript?(filename)?{
????if?(compiledScripts[filename])?{
??????return?compiledScripts[filename]
????}
????//?在入口文件?files?中找到對(duì)應(yīng)的文件名稱
????var?code?=?files[filename];
????var?wrapper?=?NativeModule.wrap(code);
????//?在沙盒上下文中執(zhí)行構(gòu)建?script?腳本
????var?script?=?new?vm.Script(wrapper,?{
??????filename:?filename,
??????displayErrors:?true
????});
????compiledScripts[filename]?=?script;
????return?script
??}
evaluateModule：根據(jù) runInThisContext 中的配置項(xiàng)來決定是在當(dāng)前上下文執(zhí)行還是單獨(dú)上下文執(zhí)行。
function?evaluateModule?(filename,?sandbox,?evaluatedFiles)?{
????if?(?evaluatedFiles?===?void?0?)?evaluatedFiles?=?{};
????if?(evaluatedFiles[filename])?{
??????return?evaluatedFiles[filename]
????}
????var?script?=?getCompiledScript(filename);
????//?用于判斷是在當(dāng)前的那種模式下面執(zhí)行沙盒上下文，此時(shí)存在兩個(gè)函數(shù)的相互調(diào)用
????var?compiledWrapper?=?runInNewContext?===?false
????????script.runInThisContext()
??????:?script.runInNewContext(sandbox);
????//?m:?函數(shù)導(dǎo)出的?exports?數(shù)據(jù)
????var?m?=?{?exports:?{}};
????//?r:?替代原生?require?用來解析?bundle?中通過?require?函數(shù)引用的模塊
????var?r?=?function?(file)?{
??????...
??????return?require(file)
????};
???}
上述的函數(shù)執(zhí)行完成之后會(huì)調(diào)用 compiledWrapper.call，傳參對(duì)應(yīng)上面的 exports、require、module, 我們就能拿到入口函數(shù)。
錯(cuò)誤拋出容錯(cuò)和全局錯(cuò)誤監(jiān)聽 renderToString: 在沒有 cb 函數(shù)時(shí)做了 promise 的返回，那說明我們?cè)谡{(diào)用次函數(shù)的時(shí)候可以直接做 try catch的處理，用于全局錯(cuò)誤的拋出容錯(cuò)。
renderToString:?function?(context,?cb)?{
????var?assign;
????if?(typeof?context?===?'function')?{
??????cb?=?context;
??????context?=?{};
????}
????var?promise;
????if?(!cb)?{
??????((assign?=?createPromiseCallback(),?promise?=?assign.promise,?cb?=?assign.cb));
????}
????...
????return?promise
??},
}
renderToStream：對(duì)拋錯(cuò)做了監(jiān)聽機(jī)制, 拋錯(cuò)的鉤子函數(shù)將在這個(gè)方法中觸發(fā)。
?renderToStream:?function?(context)?{
????var?res?=?new?PassThrough();
????run(context).catch(function?(err)?{
??????rewriteErrorTrace(err,?maps);
??????//?此處做了監(jiān)聽器的容錯(cuò)
??????process.nextTick(function?()?{
????????res.emit('error',?err);
??????});
????}).then(function?(app)?{
??????if?(app)?{
????????var?renderStream?=?renderer.renderToStream(app,?context);
????????...?
??????}
????}
?}
防止交叉污染
Node.js 服務(wù)器是一個(gè)長期運(yùn)行的進(jìn)程，在客戶端編寫的代碼在進(jìn)入進(jìn)程時(shí)，變量的上下文將會(huì)被保留，導(dǎo)致交叉請(qǐng)求狀態(tài)污染。因此不可共享一個(gè)實(shí)例，所以說 createApp 是一個(gè)可被重復(fù)執(zhí)行的函數(shù)。其實(shí)在包內(nèi)部，變量之間也存在防止交叉污染的能力。
防止交叉污染的能力是由 rendererOptions.runInNewContext 這個(gè)配置項(xiàng)來提供的，這個(gè)配置支持 true， false，和 once 三種配置項(xiàng)傳入。
//?rendererOptions.runInNewContext?可配置項(xiàng)如下
??true:?
??新上下文模式：創(chuàng)建新上下文并重新評(píng)估捆綁包在每個(gè)渲染上。
??確保每個(gè)應(yīng)用程序的整個(gè)應(yīng)用程序狀態(tài)都是新的渲染，但會(huì)產(chǎn)生額外的評(píng)估成本。
??false:
??直接模式：
??每次渲染時(shí)，它只調(diào)用導(dǎo)出的函數(shù)。而不是在上重新評(píng)估整個(gè)捆綁包
??模塊評(píng)估成本較高，但需要結(jié)構(gòu)化源代碼
??once:?
??初始上下文模式
??僅用于收集可能的非組件 vue 樣式加載程序注入的樣式。
特別說明一下 false 和 once 的場(chǎng)景， 為了防止交叉污染，在渲染的過程中對(duì)作用域要求很嚴(yán)格，以此來保證在不同的對(duì)象彼此之間不會(huì)形成污染。
if?(!runner)?{
???var?sandbox?=?runInNewContext?===?'once'
????????createSandbox()
??????:?global;
????initialContext?=?sandbox.__VUE_SSR_CONTEXT__?=?{};
????runner?=?evaluate(entry,?sandbox);
????//在后續(xù)渲染中，_VUE_SSR_CONTEXT_uu?將不可用
????//防止交叉污染
????delete?sandbox.__VUE_SSR_CONTEXT__;
????if?(typeof?runner?!==?'function')?{
??????throw?new?Error(
????????'bundle?export?should?be?a?function?when?using?'?+
????????'{?runInNewContext:?false?}.'
??????)
????}
??}
應(yīng)用輸出
在應(yīng)用輸出這個(gè)階段中，SSR 將更多側(cè)重加載腳本內(nèi)容和模版渲染，在模版渲染時(shí)在代碼中是否定義過模版引擎源碼將提供不同的 html 拼接結(jié)構(gòu)。
加載腳本內(nèi)容
此過程會(huì)將上個(gè)階段構(gòu)造的 reader 和 templateRender 方法實(shí)現(xiàn)數(shù)據(jù)綁定。
templateRenderer：負(fù)責(zé) html 封裝，其原型上會(huì)有如下幾個(gè)方法， 這些函數(shù)的作用如下圖。值得一提的是：bindRenderFns 函數(shù)是將 4 個(gè) render 函數(shù)綁定到用戶上下文的 context 中,用戶在拿到這些內(nèi)容之后就可以做內(nèi)容的自定義組裝和渲染。
render: 函數(shù)會(huì)被遞歸調(diào)用按照從父到子的順序，將組件全部轉(zhuǎn)化為 html。
function?createRenderFunction?(
??modules,
??directives,
??isUnaryTag,
??cache
)?{
??return?function?render?(
????component,
????write,
????userContext,
????done
??)?{
????warned?=?Object.create(null);
????var?context?=?new?RenderContext({
??????activeInstance:?component,
??????userContext:?userContext,
??????write:?write,?done:?done,?renderNode:?renderNode,
??????isUnaryTag:?isUnaryTag,?modules:?modules,?directives:?directives,
??????cache:?cache
????});
????installSSRHelpers(component);
????normalizeRender(component);
????//?渲染?node?節(jié)點(diǎn)，綁定用戶作用上下文
????var?resolve?=?function?()?{
??????renderNode(component._render(),?true,?context);
????};
????//?等待組件?serverPrefetch?執(zhí)行完成之后，_render?生成子節(jié)點(diǎn)的?vnode?進(jìn)行渲染
????waitForServerPrefetch(component,?resolve,?done);
??}
}
在經(jīng)過上面的編譯流程之后，我們已經(jīng)拿到了 html 字符串，但如果要在瀏覽器中展示頁面還需js, css 等標(biāo)簽與這個(gè) html 組裝成一個(gè)完整的報(bào)文輸出到瀏覽器中， 因此需要模版渲染階段來將這些元素實(shí)現(xiàn)組裝。
模版渲染
經(jīng)過應(yīng)用初始化階段，代碼被編譯獲取了 html 字符串，context 渲染需要依賴的 templateRenderer.prototype.bindRenderFns 中綁定的 state, script , styles 等資源。
TemplateRenderer.prototype.bindRenderFns?=?function?bindRenderFns?(context)?{
??var?renderer?=?this
??;['ResourceHints',?'State',?'Scripts',?'Styles'].forEach(function?(type)?{
????context[("render"?+?type)]?=?renderer[("render"?+?type)].bind(renderer,?context);
??});
? context.getPreloadFiles = r**erer.ge****：**reloadFiles.bind(renderer, context);
};
在具體渲染模版時(shí)，會(huì)有以下兩種情況：
未定義模版引擎 渲染結(jié)果會(huì)被直接返回給 renderToString 的回調(diào)函數(shù)，而頁面所需要的腳本依賴我們通過用戶上下文 context 的 renderStyles，renderResourceHints、renderState、renderScripts 這些函數(shù)分別獲得。
定義了模版引擎 templateRender 會(huì)幫助我們進(jìn)行 html 組裝
TemplateRenderer.prototype.render?=?function?render?(content,?context)?{
//?parsedTemplate?用于解析函數(shù)得到的包含三個(gè)部分的?compile?對(duì)象，
//?按照順序進(jìn)行字符串模版的拼接
??var?template?=?this.parsedTemplate;
??if?(!template)?{
????throw?new?Error('render?cannot?be?called?without?a?template.')
??}
??context?=?context?||?{};
?
??if?(typeof?template?===?'function')?{
????return?template(content,?context)
??}
?
??if?(this.inject)?{
????return?(
??????template.head(context)?+
??????(context.head?||?'')?+
??????this.renderResourceHints(context)?+
??????this.renderStyles(context)?+
??????template.neck(context)?+
??????content?+
??????this.renderState(context)?+
??????this.renderScripts(context)?+
??????template.tail(context)
????)
??}?else?{
????...
??}
};
至此我們了解了 Vue SSR 的整體架構(gòu)邏輯和 vue-server-renderer 的核心代碼，當(dāng)然 SSR 也是有很多開箱即用的腳手架來供我們選擇的。
開箱即用的SSR腳手架
目前前端流行的三種技術(shù)棧 React, Vue 和 Angula，已經(jīng)孵化出對(duì)應(yīng)的服務(wù)端渲染框架，開箱即用，感興趣的同學(xué)可以自主學(xué)習(xí)使用。
React: Next.js Vue: ?Nuxt.js Angula: Nest.js
總結(jié)
服務(wù)端渲染 ( SSR ) 是一個(gè)同構(gòu)程序，是否使用 SSR 取決于內(nèi)容到達(dá)時(shí)間對(duì)應(yīng)用程序的重要程度。如果對(duì)初始加載的幾百毫秒可接受，SSR 的使用就有點(diǎn)小題大做了。
對(duì)于源碼的學(xué)習(xí)可以幫助更好借鑒優(yōu)秀的程序?qū)懛ê图ぐl(fā)對(duì)日常代碼編程架構(gòu)的思考，如果你更傾向箱即用的解決方案，那可以使用現(xiàn)有的 SSR 腳手架來搭建項(xiàng)目，這些腳手架的模版抽象和額外的功能擴(kuò)展可以提供平滑的開箱體驗(yàn)。
參考文獻(xiàn)
Vue SSR 官網(wǎng) (https://ssr.vuejs.org/zh) Vue 使用指南 (https://www.w3cschool.cn/vuessr/vuessr-jep83epx.html) Vue SSR 源碼解析 (https://juejin.cn/post/6844903812700831757)