本项目 fork 自medux-react-admin，这是一个使用 Medux+React+Antd4+Hooks+Typescript 开发的 WEB 单页应用，你可以从本项目中看到如何将一个 SinglePage(单页应用) 快速转换为支持 SEO 的多页应用。
项目地址：medux-react-ssr
打开以下页面，使用鼠标右键点击“查看网页源码”，看是否输出了 Html
安装
// 注意一下，因为本项目风格检查要求以 LF 为换行符
// 所以请先关闭 Git 配置中 autocrlf
git config --global core.autocrlf false
git clone https://github.com/wooline/medux-react-ssr.git
cd medux-react-ssr
yarn install
以开发模式运行
- 运行
yarn start，会自动启动一个开发服务器。 - 开发模式时 React 热更新使用最新的 React Fast Refresh 方案，需要安装最新的 React Developer Tools。
以产品模式运行
- 首先运行 yarn build-local，会将代码编译到 /dist/local 目录
- 然后进入 /dist/local 目录下，运行 node start.js，会启动一个产品服务器 Demo，但是真正线上运行建议使用 Nginx，输出目录中有 Nginx 配置样例可供参考
服务器渲染(Server-Side Rendering)并不是一个复杂的技术，而 服务器渲染 与 服务器同构渲染 则是2个不同的概念，重点在于：同构，要做到一套代码完美的运行在浏览器与服务器之上不是一件简单的事情，目前业界也没有特别满意的方案，都需要或多或少的对不同的环境做差异化处理。
同构渲染的目标与意义
通常同构渲染主要是为了：
- 利于 SEO 搜索引擎收录
- 加快首屏呈现时间
- 同时拥有
单页(SPA)和多页路由的用户体验
通常同构渲染需要做到：
- 浏览器与服务器复用同一套代码。
- 用户访问的第一个页面(首屏)由服务器渲染输出，以利于 SEO 和加快呈现速度。
- 首屏由服务器渲染输出之后，浏览器在其基础上进一步渲染，但不再做重复工作，包括不再重复请求数据。
- 之后用户访问的其它页面都不再经过服务器渲染，以减少服务器压力和达到
单页(SPA)的用户体验。 - 在之后的交互过程中刷新浏览器，需要保持当前页面并重新由服务器渲染，以实现
多页路由的用户体验。
同构渲染的难点与金钥匙
获取初始化数据
同构渲染的主要难点在于 Client 端渲染时组件生命周期钩子承载了太多的职能与副作用，比如：获取数据、路由、按需加载、模块化等等，这些逻辑被分散在各个组件中随着组件的渲染动态执行，而它们的执行又再次引起组件的重新渲染。简单来说就是：
Render -> Hooks -> Effects -> ReRender -> Hooks -> Effects…
这样的渲染流程在 Server 端是不行的，因为通常 Sever 端不会 ReRender，因此必须把所有副作用都提前执行，而后在一次性 Render，简单来说就是：
Effects -> State -> Render
那么解决方案就是将这些副作用尽量的与组件的生命周期钩子脱离，并引入独立的状态管理机制来管理它们，让 UI 渲染变成简单纯粹的 PrueRender，而这正是@medux 所倡导的状态驱动理念。
异步按需加载
在 Client 端渲染时，为了提升加载速度我们通常对代码进行 chunk 分包、并使用异步按需加载来优化用户体验。而在 Server 端渲染时这变得完全没必要，反而会拖慢加载速度。如何在 server 端中替换异步代码为同步代码呢？正好@medux将模块加载视为一种配置策略，它可以很轻松的让将模块加载在同步和异步之间切换。
更多细节请看：