react同构概念梳理

react同构

传统的reactSPA应用存在以下问题 ：

1. 首屏加载速度慢

2. 不利于SEO

   
   
   5922673890f5e347c729b732866de9f.png

因为百度的搜索引擎爬虫只认识Html上的文本内容，不认识 js上的内容。而SPA应用服务器返回的是一个空的html,里面只包含id = 'root'的div标签。所以百度的蜘蛛爬虫抓取不到页面的SEO信息。

• 客户端渲染原理：

  
  
  e09cb47fedfffa3a1c15e79bbf1cbfe.png

• 服务端渲染原理：

  
  
  eb388ca8bfdc17b690ecd350369360a.png

react服务端渲染建立在react虚拟DOM的基础上

renderToString这个方法，react里的事件不会被渲染出来，只能渲染出组件的基本内容。服务端先把页面渲染出后，让相同的代码在浏览器端像传统的react项目一样再次运行一下

所以同构，说白了就是相同的代码，在浏览器端执行一次，在服务器上执行一次。

9ece49ca6817d4baa806cdb7ff0e60c.png

服务端渲染只在页面第一次加载时做相应的请求。请求html和JS，路由跳转的时候，是客户端Js控制的页面跳转。

同构是只有首次进入的页面是服务端渲染，其他页面还是react机制。

• ssr路由：客户端：BrowserRouter 服务端: staticRouter

• 异步数据服务端渲染时，ComponentDidMount在服务器端是不执行的,所以要解决如何在服务端执行ComponentDidMount的问题。=>loadData方法及路由重构

• loadData方法负责在服务端渲染之前，把这个路由需要的数据提前加载好