react ssr

是否使用redux

数据预取

css处理：isomorphic-style-loader

react ssr 中间件：处理请求，将react组件处理为html返回

N

ReactDom.hydrate()，最大限度的保留服务端使用renderToString()渲染的内容，同时添加事件绑定等交互

返回同步组件

浏览器接管页面

浏览器加载并执行静态资源

对比成功

render

服务端在路由上注入context属性，客户端将数据序列化为字符串存为全局变量或者注入路由

中间件：koa2

Y

服务端渲染

复用服务端节点

双端数据均从store中存储获取

打包服务端代码，target为node，生成manifest用作资源映射

BrowserRouter

服务端返回html，以及打包好的静态资源的引用

路由跳转

双端节点对比

node server监听请求，并处理

renderToString()，将组件处理为html返回

注册监听popstate事件

页面初始化，浏览器发起一个web请求

等待异步组件加载完成

StaticRouter

是否为异步组件

页面组件

是否存在数据预取方法

是否已经直出数据 || action是否为PUSH

dispatch(action)

按需加载：react-loadable

根据ctx.path匹配页面组件（存储cookie，透传cookie）

执行数据预取方法，入参为store和url中的searchParams

刷新页面

替换直出内容，使用客户端节点渲染

重新获取数据

componentDidMount阶段，获取数据

seo处理：react-helmet