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