隨著React服務端渲染越來越流行，筆者也想嘗嘗鮮，經過半個月的折騰，筆者把原先的客戶端渲染項目，通過結合 next.js 構建了一個服務端渲染的同構項目。再加上開啟服務器頁面緩存，以及靜態資源CDN加速優化，最終使得網站首屏渲染時間在0.6秒（即：DOMContentLoaded 的時間）左右，大大提高了頁面的響應速度，進一步提升用戶體驗。
渲染截圖
ssr.png
項目線上地址
前端架構源碼
架構簡要說明
很顯然，這是移動端網站，選用了 React16 + next.js4 + antd-mobile2 + redux 的技術棧，算是筆者學習React 兩年來第一個服務端渲染的項目。由于愛折騰，筆者喜歡自己動手搭腳手架，期間參考了各路大牛的源碼和想法，非常感謝！所以這次做下總結，如果恰好能幫到在React服務端渲染方面有困惑的同學，何樂而不為？
-
目錄，具體參照源碼所示
image.png - 代碼規范，本架構通過 eslint 配備了完善了 React 語法規范檢查。
- 樣式，由于 next.js 目前的版本（v 4.2）并不建議配置loader（據說下個版本會支持），所以我們的樣式最好能提前編譯好，為此筆者額外配置了 webpack-handle-css.js 的文件，用于樣式的實時編譯和打包。同時引入了 antd-mobile 作為輔助UI庫，并且支持主題配置。當然，本站依然使用了rem布局，至于字形圖標的使用請參閱這里。
- next，next有自己的運行機制，你需要注意和遵守，比如你的所有頁面都必須放到根目錄下的pages文件夾里，至于路由和文件路徑的關系，在 server.js 里有展示。另外，next 有自己的路由模塊，所以這里用不到
react-router。更多詳情 - 組件，可以復用的模塊要寫成組件；不能復用，但是邏輯比較復雜的模塊也應該寫成組件。其余的，都寫在pages里就行了。組件分為無狀態組件，和有狀態組件，需要指出的是，在next.js的架構中，如果你寫的是無狀態組件，可以不用引入 react，如：
export default ({ text }) => ( <div className="h100 flex jc-center ai-center"> <i className="i-loading rotate font32 c999" /> <span>{text || '加載中...'}</span> </div> ) - redux，初始化的redux數據，統一寫在每個page的getInitialProps生命周期里，它的特點是可以在服務端渲染和客戶端渲染中都能使用。更多細節都在源碼里，歡迎交流探討。
- 部署上線，這是個同構項目，需要配置服務器node環境，在 server.js 文件里，筆者開啟了服務端頁面緩存，但對于有用戶數據的頁面則是選擇了關閉緩存，避免串號問題，另外在 next.config.js 文件里，通過設置 assetPrefix ，將所有靜態資源放入CDN中，進一步提高網站首屏渲染速度。CDN 中的靜態資源需要手動導出，運行
npm run export，資源將被打包到根目錄下的 outCDN 中。
