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 在细节上追求完美-目录结构优化

为什么我会在目录结构上追求完美呢？其实在做这套方案的时候，一直在思考三个问题，

什么样的目录结构是最简单易上手？
后期项目开发不臃肿？
怎么样的目录适合多人协作开发代码？

参考了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 永无止境的问题-持续迭代

整个框架搭下来，让自己受益匪浅，但是依然不完美。心底依然冒出了很多个问题，需要去解决：

后端框架可选：后端不能只限koa、也可以是egg、或者java
mvvm框架可选：不只是React，是不是也可以Vue
错误监控可选：是不是可以集合错误监控
SSR-Cli：解决上面三个问题，需要开发简单易用的配置工具
...等等

Next.js+Koa的React SSR企业级方案实践 ReactSSR