CSR、SSR、NSR、ESR 傻傻分不清楚，一文幫你理清前端渲染方案！

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 不同階段優劣對比：

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 流式渲染方式的白屏時間要短很多。

05

**總結
**

CSR、SSR、NSR、ESR，前端渲染方案如此紛繁複雜，其實每一種渲染方案都有其優勢和劣勢，一定要結合自身的業務需求，平衡好收益和成本選擇適合自己的方案。

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/MZRZxmXSoAnGln5podQIKw