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架構

　　本文選自《現代前端技術解析》，點此連接可在博文視點官網查看此書。
　　　　　　　　　　　　　　　　　　　　　
　　想及時得到更多精彩文章，可在微信中搜索「博文視點」或者掃描下方二維碼並關注。