React SSR 企業級方案最佳實踐

wiwi_發表於2019-03-04
React

背景： 在使用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

相關文章