react ssr
2020-04-29 15:50:36 3 举报
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
0 条评论
回复 删除
下一页
