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 節點上發起動態部分內容請求，并將動態內容在靜態部分的響應流后，繼續返回給用戶。