116
Node後端數據渲染
引言：對於前端開發者來說，在大型Web應用開發中，很多時候並不需要完全重新設計整個應用後台的架構，更多的情況下需要結合Node的能力幫助我們解決前後端分離開發模式下無法解決的問題。本文帶我們學習通常前後端分離的開發模式下有哪些問題，利用Node端的服務又是如何幫助我們解決這些問題的。
本文選自《現代前端技術解析》。
SPA場景下SEO的問題
通常情況下，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架構
本文選自《現代前端技術解析》，點此鏈接可在博文視點官網查看此書。
想及時獲得更多精彩文章，可在微信中搜索“博文視點”或者掃描下方二維碼並關注。
最後更新：2017-05-08 10:01:37