01 引言
隨著前端系統的越發復雜，前端的性能也受到越來越多的重視 。Google也不斷在推進新的性能相關指標，從原先的Performance API中的指標逐步演進成用戶性能體驗相關的指標 。
對于用戶而言 ， First Paint、First Meaningful Paint和TTI這幾個指標可以直接影響到用戶體驗 。關于前端性能優化有非常多的最佳實踐可以參考，這篇文章會重點介紹前端渲染的方案及其優劣 。
02 CSR vs SSR
CSR：Client Side Rendering
瀏覽器(Client)渲染顧名思義就是所有的頁面渲染、邏輯處理、頁面路由、接口請求均是在瀏覽器中發生 。其實，現代主流的前端框架均是這種渲染方式，這種渲染方式的好處在于實現了前后端架構分離，利于前后端職責分離，并且能夠首次渲染迅速有效減少白屏時間 。同時，CSR可以通過在打包編譯階段進行預渲染或者骨架屏生成，可以進一步提升首次渲染的用戶體驗 。
但是由于和服務端會有多次交互（獲取靜態資源、獲取數據），同時依賴瀏覽器進行渲染，在移動設備尤其是低配設備上，首屏時間和完全可交互時間是比較長的 。
SSR：Server Side Rendering
服務端渲染則是在服務端完成頁面的渲染，在服務端完成頁面模板、數據填充、頁面渲染 ， 然后將完整的HTML內容返回給到瀏覽器 。由于所有的渲染工作都在服務端完成，因此網站的首屏時間和TTI都會表現比較好 。
但是，渲染需要在服務端完成，并不能很好進行前后端職責分離，而且白屏時間也會比較長，同時，對于服務端的負載要求也會比較高 。
基于Hydration的SSR和CSR融合
SSR和CSR均有各自的優點和缺點，因此，業界提出前后端渲染同構的方案來整合SSR和CSR 。
整個頁面的加載和刷新是通過服務端渲染來實現，在渲染生成的HTML中內嵌JavaScript和數據內容 。通過這樣的實現，可以達到和SSR相同的首屏時間，并且基于Hybration，可以生成前端的虛擬Dom，避免前端觸發二次渲染 。
SSR和CSR的頁面渲染體驗對比：
SSR和CSR不同階段優劣對比：
【SSR、NSR、ESR、csr是什么意思 ，一文幫你理清前端渲染方案】
Serverless SSR
前端使用SSR進行渲染同構有一個非常明顯的缺點：服務資源消耗和運維 。通常情況下，同構SSR會采用Node服務，需要固定的服務器資源 ， 并且服務器的運維對于前端同學也提出了很高的要求 。隨著Serverless技術的出現 ， 這些問題似乎得到了很好的解決 。Serverless基于觸發器調用云端部署的函數 ， 然后調用后端服務 。
對于前端同學而言，僅僅只需要實現云端函數的實現，對于服務器的運維管理完全不用關心，同時服務器會實現自動彈性伸縮，有效節省了機器資源 。
當然，Serverless并不是萬能的，服務器的冷啟動目前依舊還是一個非常大的問題 。
SSR在性能收益上是完勝CSR ， 配合Serverless，SSR的開發成本僅僅比CSR有略微的提高 ， 因此，從收益成本來看，Serverless SSR已經有了較大的優勢，可能會成為未來的趨勢 。
03 NSR
UC瀏覽器在新聞feed流頁面加載中采用了NSR（Native Side Rendering） ， 首先在列表頁中加載離線頁面模板，通過Ajax預加載頁面數據，通過Native渲染生成Html數據并且緩存在客戶端 。
NSR本質是分布式SSR，將服務器的渲染工作放在了一個個獨立的移動設備中，實現了頁面的預加載，同時又不會增加額外的服務器壓力 。
04 ESR
ESR - Edge Side Rendering，方案的核心思想是，借助邊緣計算的能力，將靜態內容與動態內容以流式的方式，先后返回給用戶 。cdn 節點相比于 server，距離用戶更近，有著更短的網絡延時 。在 cdn 節點上，將可緩存的頁面靜態部分 ， 先快速返回給用戶，同時在 cdn 節點上發起動態部分內容請求，并將動態內容在靜態部分的響應流后，繼續返回給用戶 。
從上面結果可以看出 ， 在網速越慢的情況下 ， 通過 cdn 流式渲染的最終主要元素出來的時間比原始 SSR 的方式出來得越早 。這與實際推論也符合，因為網絡越慢，靜態資源加載時間越慢，對應的瀏覽器提前加載靜態資源帶來的效果也越明顯 。另外，不管在什么網絡情況下，cdn 流式渲染方式的白屏時間要短很多 。
