React SSR 企業級方案最佳實踐

背景： 在使用react來開發SSR服務端渲染項目，有些不適應，若是能像vue-cli同樣的簡單上手腳手架工具，egg企業級架構及代碼規範；對於新手來講，體驗效果會更好。最終決定使用Next.js做爲React的SSR渲染，Koa做爲後端渲染，達到同構渲染，同構開發。

分析： Next.js項目的目的只專心作SSR渲染一層。若是要進行開發，還不行。缺乏單元測試、覆蓋率測試、代碼esLint檢測、prettier代碼風格自動格式化、打包分析等，最重要的是簡單易上手。

1.0 以簡單上手爲目標-開始試錯與實踐

肯定了大體的方案，就開始立馬開始實踐，踩了不少坑，實行了下面的方案：

• koa： 集成koa後端架構（計劃開發可選egg）。
• SSR渲染： Next.js簡單易用的渲染方案。
• css編譯器： 支持引入less、sass、css開發，外部資源引用。
• css-in-js： styled-jsx集成sass解決方案，簡單易上手,快速編寫css樣式。
• 語法檢測： eslint語法規則檢測和prettier代碼風格的檢查工具，集成TypeScript，讓語法更嚴謹、代碼風格統一化。
• 單元測試： 基於Jest + Enzyme 的 React 單元測試, 極大的下降寫單元測試的難度，無需更多的配置。
• 語法兼容： 支持React中className和class兩種樣式寫法；css、less、sass、styled-jsx支持autoprefixer前綴自動補齊
• 代碼優化： 支持打包模塊分析 npm run analyze:bundles；source Maps。

2.0 在細節上追求完美-目錄結構優化

爲何我會在目錄結構上追求完美呢？其實在作這套方案的時候，一直在思考三個問題，

1. 什麼樣的目錄結構是最簡單易上手？
2. 後期項目開發不臃腫？
3. 怎麼樣的目錄適合多人協做開發代碼？

參考了vue-cli、React的不少項目，還有些比較臃腫的項目，進行了反覆的優化。

#文件目錄
ReactSSR
├─build/
├─config/
├─server/
│  ├─controllers/
│  ├─helpers/
│  ├─middleware/
│  └─test/
│  └─index.ts
│  └─routes.ts
├─src
│  ├─components/
│  ├─constants/
│  ├─pages/
│  ├─redux/
│  ├─static/
│  └─utils/
│  └─index.tsx
└─test/
└─.babelrc
└─...
複製代碼

3.0 永無止境的問題-持續迭代

整個框架搭下來，讓本身受益不淺，可是依然不完美。心底依然冒出了不少個問題，須要去解決：

1. 後端框架可選：後端不能只限koa、也能夠是egg、或者java
2. mvvm框架可選：不僅是React，是否是也能夠Vue
3. 錯誤監控可選：是否是能夠集合錯誤監控
4. SSR-Cli：解決上面三個問題，須要開發簡單易用的配置工具
5. ...等等

Next.js+Koa的React SSR企業級方案實踐 ReactSSR