react 同构

• 本项目只作为 探索项目， 不能作为最佳实践
• node v10.15
• 开发环境，只启动前端项目，通过 webpack devserver 启动，
• 生产环境，将 node 与 前端项目一起打包，通过 pm2 启动

运行项目

npm install
npm start

目录结构

.
├── cli  脚手架
│   └── ...
├── node_modules
├── scripts 脚本
│   └── ...
├── dist 打包后的文件
│   ├── assets/
│   │   └── ...  .js|.css
│   └── server.js
├── src
│   ├── client 客户端
│   │   ├── components 组件
│   │   │   ├── pages   页面
│   │   │   └── common  公共组件
│   │   ├── static  静态资源
│   │   ├── app.js 前端入口
│   │   ├── index.html 前端模板
│   │   └── ...
│   ├── lib  客户端服务端公共方法
│   │   └── ...
│   ├── server 服务端
│   │   ├── middleware 中间件
│   │   │   └── index.js 在index中引入全部中间件
│   │   ├── utils node封装的工具
│   │   └── index.js  node入口
├── config webpack 配置
│   └── ...
└── ...

TODO

• 配置开发环境
• 开发前端界面 hooks，实现多个页面，每个页面依赖多个组件
• express 文件压缩、打包、缓存设计
• 脚手架、实现页面组件的创建(产生 page/component，page 包含 getInitialProps)
• typscript
• 与 next 框架对比
• 添加 jest 测试
• 开发环境热更新，修改之后依然需要每次刷新页面
• rematch 状态管理

QUESTIONS

• 在 router 中异步引入组件会有错误
• staticRouter 有一个问题 ： 不会在 dom 标签上添加 data-reactroot ,导致客户端重新渲染一次页面