服务端渲染

同构

在服务器与客户端运行同一份代码

双端路由同构

前端还是继续使用的 History or browser模式

服务端则是使用staticRouter

//客户端
<BrowserRouter>
      <App/>
</BrowserRouter>

// 服务端
<StaticRouter location={req.url} context={context}>   
        <App/>
</StaticRouter>

双端数据同构

1. 为组件约定好数据预取的静态方法
2. 服务端查找到当前路由对应组件
3. 调用预取方法获得数据
4. 将数据作为属性render传入给组件
5. 组件内render做相应处理
6. 服务端直出组件
7. 浏览器接管页面，完成渲染

查找对应组件

去路由表查

如果遇到动态路由的话 用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 头来做渲染数据字符串返回

资源映射表

生成资源映射表，用于服务端使用