服务端渲染
同构
在服务器与客户端运行同一份代码
双端路由同构
前端还是继续使用的 History or browser模式
服务端则是使用staticRouter
//客户端
<BrowserRouter>
<App/>
</BrowserRouter>
// 服务端
<StaticRouter location={req.url} context={context}>
<App/>
</StaticRouter>
双端数据同构
- 为组件约定好数据预取的静态方法
- 服务端查找到当前路由对应组件
- 调用预取方法获得数据
- 将数据作为属性render传入给组件
- 组件内render做相应处理
- 服务端直出组件
- 浏览器接管页面,完成渲染
查找对应组件
去路由表查
如果遇到动态路由的话 用path-to-regexp去匹配
数据脱水
将数据防止在输出的html中,可以是js脚本 window.xxx = json
或者是对应的一些dom标签内
数据注水
在前端渲染应用的时候,获取到window.xxx 来初始化整个组件树
降级到 CSR
componentDidMount(){
if(!this.state.data){//判断是否有初始化数据
//进行数据请求
Index.getInitialProps().then(res=>{
this.setState({
data:res.data||[]
})
})
}
}
- 方法同构: 为组件声明
getInitialProps
静态方法,这是一个同构方法,用于双端的数据获取 - 数据预取:在服务端通过路由匹配找到目标的组件,然后调用组件的数据预取方法得到数据
- 将初始化数据作为属性传递给组件
- 数据脱水:将数据序列化,和
html
字符串 一起直出返回给浏览器端 - 数据注水:浏览器端得到服务端直出的数据,也通过属性将数据传给组件
- 如果初始化数据不存在,则可以在
componentDidMount
生命周期内请求一次数据
hydrate
作用是复用直出的dom结构
render
直接不复用直出的dom结构了
动态TDK (文档信息)
isomorphic-style-loader
获取在同构下的样式标签以及样式表、
//用于获得模块信息和 样式内容
exports._getContent = function() { return content; };
//获得 css 内容
exports._getCss = function() { return '' + css; };
//执行 dom 操作,将 css 动态插入到head 内
exports._insertCss = function(options) { return insertCss(content, options) };
react-helmet
可以使用 html 头来做渲染数据字符串返回
资源映射表
生成资源映射表,用于服务端使用