引言：對于前端開發者來說，在大型web應用開發中，很多時候并不需要完全重新設計整個應用背景的架構，更多的情況下需要結合node的能力幫助我們解決前後端分離開發模式下無法解決的問題。本文帶我們學習通常前後端分離的開發模式下有哪些問題，利用node端的服務又是如何幫助我們解決這些問題的。 本文選自《現代前端技術解析》。
通常情況下，spa應用或前後端分離的開發模式下頁面加載的基本流程是，浏覽器端先加載一個空頁面和javascript腳本，然後異步請求接口擷取資料，渲染頁面資料内容後展示給使用者。那麼問題來了，搜尋引擎抓取頁面解析該頁面html中關鍵字、描述或其他内容時，javascript尚未調用執行，搜尋引擎擷取到的僅僅是一個空頁面，是以無法擷取頁面上中的具體内容，這就比較影響搜尋引擎收錄頁面的内容排行了。盡管我們會在空頁面的裡面添加keyword和description的内容，但這肯定是不夠的，因為頁面關鍵性的正文内容描述并沒有被搜尋引擎擷取到。
如果使用node後端資料渲染（有人稱之為直出，後文中也稱之為直出層），在頁面請求時将内容渲染到頁面上輸出，那麼搜尋引擎擷取到的html就已經包含頁面完整的内容，頁面也就更容易被檢索到了。
除了seo問題，在前後端分離的開發模式下頁面在javascript執行渲染之前是空白的（或提示使用者加載中）。如圖6-3所示，使用者在看到資料時已經花費的網絡等待時間：dom下載下傳時間 + dom解析時間 + javascript檔案請求時間 + javascript部分執行時間 + 接口請求時間 + dom渲染時間。這時使用者看到頁面資料時已經是三次串行網絡資源請求之後的事情了。
前後端分離方式頁面渲染主要流程
然而，如果使用後端直出來進行資料渲染，首先seo的問題不複存在，使用者浏覽器加載完dom的内容解析後即可立即展示，網絡加載的問題也得到解決。其他的邏輯操作（如事件綁定和滾動加載的内容）則可按需、按異步加載，進而大幅度減少展示頁面内容花費的時間。那麼一般node後端資料渲染的整個流程又是怎樣的呢？
圖6-4為目前一般背景頁面資料直出的通用架構設計，直出層接受前端的路由請求，并在node端的controller層異步請求服務接入層接口，獲得model資料并進行組裝拼接，然後提取相對應的node端view模闆渲染出html輸出給使用者浏覽器，而不用通過前端javascript請求動态資料後渲染。不僅如此，直出層根據不同的浏覽器useragent，也可以提取不同的模闆渲染頁面傳回給不同的使用者浏覽器，是以這種實作方式不僅非常适合大型應用服務的實作場景，而且可以友善地實作網站的響應式内容直出。
node直出層開發web架構
想及時獲得更多精彩文章，可在微信中搜尋“博文視點”或者掃描下方二維碼并關注。