服务器端和客户端渲染不同节点时报错的疑惑

Question

课程4-1（约7分40秒）讲到：
“当客户端与服务器端渲染出了不同的html结构时，控制台会报同构的错误”。
不是很理解这个报错机制

如图：warning:Expected server HTML to contain a matching 《div》 in 《div》

我的理解：

服务端渲染的html和客户端执行js后生成的html可以是天差地别的，后者只需找到挂载的root节点就可以了。
那为什么还要检查服务端html和客户端html之间的差异，为什么老师说一定要使得两者的结构保持一致？

问题：
我不是很理解这个报错机制，为什么一定要两端渲染的html必须保持一致？
请老师同学答疑解惑。

Answer 1

Dell 2018-11-30 00:13:04

不一致怎么让客户端接管服务器端渲染出的内容呢？

• 提问者 renderman #1

  DellLee老师你好：
  
  *问题1:
  
  可以讲讲“接管”时背后的检查原理吗，是哪个包的哪个方法去检查服务器端渲染的结构和客户端渲染的结构是否完全一致？
  从报错看，好像是react-dom。但它又是怎么知道我正在做同构这件事的呢？

• 提问者 renderman #2

  *问题2:
  有没有场景，是需要服务器端和客户端的结构有所区别的呢？   
  我想到一个场景，服务器渲染的文档会被百度蜘蛛爬虫看到，而客户端渲染的文档不会。有时候为了seo需要，服务端渲染可以做这方面的优化，而客户端可以完全抛弃seo的包袱，一心一意为用户体验下功夫。这种需求到底对不对，我该如何设计此类同构组件和流程呢？

• Dell 回复 提问者 renderman #3

  当你用reactDom.hydrate，他要分析你html 的结构和js结构是否一致，一致就直接复用，不一致要重新删除掉创建，所以当然需要你一致才能保证性能了。
  
  第二点是对的

点开查看后面1条评论