React16 + next.js 4 + antd-mobile2 服務端渲染實踐總結

隨着React服務端渲染愈來愈流行，筆者也想嚐嚐鮮，通過半個月的折騰，筆者把原先的客戶端渲染項目，經過結合 next.js 構建了一個服務端渲染的同構項目。再加上開啓服務器頁面緩存，以及靜態資源CDN加速優化，最終使得 網站首屏渲染時間在0.6秒（即：DOMContentLoaded 的時間）左右，大大提升了頁面的響應速度，進一步提高用戶體驗。

渲染截圖

項目線上地址

前端架構源碼

架構簡要說明

很顯然，這是移動端網站，選用了 React16 + next.js4 + antd-mobile2 + redux 的技術棧，算是筆者學習React 兩年來第一個服務端渲染的項目。因爲愛折騰，筆者喜歡本身動手搭腳手架，期間參考了各路大牛的源碼和想法，很是感謝！因此此次作下總結，若是剛好能幫到在React服務端渲染方面有困惑的同窗，何樂而不爲？

• 目錄，具體參照源碼所示

• 代碼規範，本架構經過 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" />&nbsp;
      <span>{text || '加載中...'}</span>
    </div>
  )

• redux，初始化的redux數據，統一寫在每一個page的getInitialProps生命週期裏，它的特色是能夠在服務端渲染和客戶端渲染中都能使用。更多細節都在源碼裏，歡迎交流探討。
• 部署上線，這是個同構項目，須要配置服務器node環境，在 server.js 文件裏，筆者開啓了服務端頁面緩存，但對於有用戶數據的頁面則是選擇了關閉緩存，避免串號問題，另外在 next.config.js 文件裏，經過設置 assetPrefix ，將全部靜態資源放入CDN中，進一步提升網站首屏渲染速度。CDN 中的靜態資源須要手動導出，運行 npm run export，資源將被打包到根目錄下的 outCDN 中。