小而美的 egg react ssr 開源實現方案

本文基於優酷 pc/h5 業務改造的經驗心得，提煉出了一套基礎的 egg-react-ssr 服務端渲染應用開發的基礎骨架。為了更好的對比 next.js 以及市面上等其他各種實現方案，我提煉出了比較精華的幾點優勢。

這裡我們提供了乙個腳手架，方便你建立快速專案。

在實現方案上，我們拋棄了傳統的模版引擎的做法，頁面的一切元素包括基礎 html 骨架皆採用 jsx 的方式來編譯生成而不需要使用 react-helmet 這種額外的庫。

同時我們正在接入集團的 ginkgo faas runtime，之後就可以使用 serverless 的方式來開發 ssr 應用。螞蟻的前端框架 umi.js 與我們的實現方式類似。

綜上：我們自己用 react 提供的 api 去實現了一套簡潔優美全面的 ssr 方案，並且核心**十分簡潔，主要配置皆暴露出來，這樣構建工程的思路更清晰些，我們盡可能避免了你去學習新的輪子新的概念，一切功能都用社群現有的熱門模組來完成。

本專案已經過很多外部開發者使用以及內部其他部門使用，反饋開發體驗好過 next.js,nuxt.js 等方案很多。

我們遵循 next.js 的規範，在頁面級元件上定義靜態方法 getinitialprops 來做頁面初始化的資料獲取操作。在首次訪問頁面以及前端路由切換時會呼叫該方法。

page.getinitialprops = async (ctx) => )

ssr 的詳細原理和執行機制在官方文件中都有詳細解釋，大家比較感興趣的可能是，如何實現 ssr/csr 無縫切換。在本地開發時，你可以同時啟動兩種渲染模式來觀察區別。在生產環境時，可以通過 config 配置檔案或者 url query 引數，來隨時切換兩種渲染模式

1. 實現原理

下面來介紹我們的詳細做法，我們使用 jsx 來編寫前端元件同時作為 csr 模式下的頁面骨架的生成**，拋棄 html 檔案以及模版引擎。

2. 為什麼選用 jsx？

更加詳細的對比可以檢視下列文章

中文翻譯：

3. 編寫 layout

我們可以直接使用 jsx 來編寫我們的 meta 標籤。同時插入我們在配置檔案中配置的指令碼檔案和樣式檔案並且注入服務端預取的資料給瀏覽器。

4. 編譯 layout

我們提前將 layout 元件打包為可以在 node.js 環境中呼叫的模組。這樣我們執行的時候就不需要動態使用 webpack 來進行編譯。

5. 以 ssr 模式渲染頁面

ssr 模式下我們可以直接渲染包含子元件的 layout 元件即可以獲取到完整的頁面結構。

6. csr 模式

為了應對大流量或者 ssr 應用執行錯誤，需要緊急切換到 csr 渲染模式下，我們可以通過 config.type 來控制。實現方式如下：

在非 ssr 渲染模式下，服務端直接返回乙個只包含空的的 html 文件。

7. 效果展示

18 個貢獻者；

pr(pull request) 共 85 個，外部有效 pr 在 5 個左右（比如 mpa、bug 修復），文件等小修改較多；

使用 jest 做單測，nightwatch 做 e2e，使用 circleci 做 ci 整合、測試覆蓋率 100%；

大型外部分享會 1 次；

口碑較好，用過的都說比 next.js 好；

整體**質量有提公升，完善了測試，bug 有降低，很多沒有考慮到的 case 都被完善了；

由此衍生出 serverless-side-render。結合當下火熱的 serverless 技術，按照 yml 檔案中對於頁面渲染層的規範，來輕易的開發並部署出乙個具有 ssr/csr 功能互相切換的應用。

作者介紹：阿里文娛前端工程師十憶