SSR梳理 (12/20周计划

169 阅读1分钟

CSR - SSR.png

  1. 首屏加载速度更快
  2. 利于SEO

客户端渲染 React代码在浏览器上执行,消耗的是用户浏览器的性能

服务端渲染 React代码在服务器上执行,消耗的是服务器端的性能 React会使用虚拟don等算法,会比较消耗服务器的性能,意味着需要更多的机器

同构:React.hydrate 服务端渲染的时候renderToString不会去渲染事件上的东西,比如onClick事件 服务器端先把页面渲染出来,相同的代码在浏览器端再去渲染一次。 同构:一套react代码,在服务器端执行一次,在客户端再执行一次(这个时候去绑定事件。

同构.png

只有访问的第一次页面渲染才是服务器端渲染!!后面路由的切换就是js来控制的了,不是服务器端渲染了。

同构引入Redux.

异步数据服务器渲染: loadData方法

数据脱水/注水: server端把必要的数据写入 window.context里面,数据的注水过程 客户端渲染的时候把数据从window里面取出来,数据的脱水

中间层承担获取数据的责任

样式处理: css / isomorphic-style-loader 样式的抖动处理

react-helmet

预渲染 - prerender 给爬虫使用, 区别于seo的一种思路