作者：水瀾
來源：淘系前端團隊
最近随着 Rax SSR 完成渲染性能 6x React 的提升，以及工程上 Serverless 釋出形式的對接，我想是時候跟大家介紹下 Rax SSR 了。
什麼是 SSR
SSR 的全稱是 Server Side Rendering，對應的中文名是：伺服器端渲染，顧名思義是将渲染的工作放在 Server 端進行。
而與之對應的是 CSR ，用戶端渲染，也就是目前 Web 應用中主流的渲染模式，一般由 Server 端傳回的初始 HTML 頁面，然後再由 JS 去異步加載資料，然後完成頁面的渲染。
下面這張圖，是同一個應用，用兩種不同的方式去渲染，頁面的加載時序。
（橙色部分為頁面背景色，對應了正常意義上的白屏時間）
可以看到，在内容達到時間上，SSR 工作原理，決定了它的優勢，這種差異在弱網環境下會展現的更加明顯。
SSR 的困境
SSR 那麼優秀，但是為什麼卻沒能成為 Web 主流的開發模式呢，我想這是因為建構 SSR 應用并不容易：
- 但當你開始開發一個 SSR 應用時，就已經不在是一個簡單的前端開發工程師了，而将被迫成為全棧工程師。傳遞産物從原來的 JS Bundle 變成了 Node 應用，随之而來的是，需要選型一個 Node 架構，搭建一個 Node 應用，并且應對性能開銷、保障應用穩定性等等。
- 其次，還需要考慮如何讓現有的前端代碼跑到 Server 端上，雖然類似 React 這些主流的架構都提供了 Server 端渲染的能力，但是，不同端上渲染原理和執行環境的差異，會導緻編碼上的很多差異，比如在 Node 端調用了 window 變量，那麼就會報錯了，同樣的 Hooks 之類的異步更新機制在 Server 端也不适用。
- 最後，當你完成應用的開發，還需要考慮這些問題：如何部署環境、如何負載均衡、如何應對伺服器當機、如何應對使用者請求峰值等等
是以，雖然 SSR 在性能上完勝 CSR ，但卻因為其高昂的開發和維護成本，使人們轉而投向 CSR 的懷抱。
SSR 遇上 Serverless
近年來，随着 Serverless 生态建設的不斷完善，我們也在思考，Serverless 的模式是否能為 SSR 帶來新的生命力，答案是肯定的。
一方面，借助于函數即服務（FaaS）的能力，不需要再去搭建傳統的 Node 應用，一個函數就可以變成一個服務，開發者可以更純粹的關注于業務邏輯。
另一方面，FaaS 以函數為機關的形式以及彈性機制，為 SSR 應用帶來了天然的隔離性和動态修複能力，可以更好的避免頁面間的交叉污染，或一些邊界的異常場景對應用帶來緻命性的傷害。
再者，無需運維、按需執行、彈性伸縮這些特性，大大降低了 SSR 應用對開發者的門檻。
是以，借助于 Serverless 帶來的想象空間，以及 Rax 在工程和 SSR 渲染引擎上所做的工作，我們是完全可以做到媲美目前 CSR 模式的開發體驗的。
Rax SSR 帶來什麼
希望下面幾個點，可以讓您對 Rax SSR 有個快速的了解：
零配置上手
沒有複雜的工程配置，基于 Rax 的 CLI 工具，就快速建立一個 SSR 工程。
極緻的渲染性能
Rax 的 Server 端渲染引擎，采用了靜态模闆 + 動态元件的混合渲染模式，渲染性能是 React 的 6 倍。
-----------compare renderToString----------
React(16.12.0)#renderToString x 1,178 ops/sec ±1.23% (85 runs sampled)
Rax(1.1.1)#renderToString x 6,047 ops/sec ±1.73% (82 runs sampled)
Preact(10.2.1)#renderToString x 1,005 ops/sec ±1.10% (86 runs sampled)
The benchmark was run on:
PLATFORM: linux 5.0.0-1027-azure
CPU: Intel(R) Xeon(R) CPU E5-2673 v4 @ 2.30GHz
SYSTEM MEMORY: 6.782737731933594GB
NODE VERSION: v10.18.1
複制
benchmark 位址：https://github.com/raxjs/server-side-rendering-comparison
Serverless 的釋出模式
Rax 的工程支援 Serverless 的釋出模式，可被釋出到阿裡雲、AWS 等函數托管平台，也可以內建到基于 express 、koa 的傳統 Node.js 應用。
以釋出到社群的 Serverless 托管平台 Now 為例，沒有複雜的應用開發和申請流程，在現有 Rax 工程中，擴充一個插件，就可以一鍵完成 SSR 應用的上線了：
性能對比
以一個帶資料請求的真實 Rax SSR 應用為例，性能對比資料顯示：WIFI 下， SSR 的首屏呈現時間相比 CSR 提升 1 倍；弱網環境下，SSR 相比 CSR 提升約 3.5 倍。
錄屏效果：(左：SSR；右：CSR）
SSR Demo 位址：https://rax-demo.now.sh/ssr/home
CSR Demo 位址：https://rax-demo.now.sh/csr/home
讓我們一起開啟 SSR 之旅吧
https://rax.js.org/ssr