服务端渲染旧时笔记存档

服务端渲染

同构

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

双端路由同构

前端还是继续使用的 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 头来做渲染数据字符串返回

资源映射表

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注