服务端渲染和客户端渲染className不匹配?

Question

需求是这样的：要根据浏览器是否出现滚动条给元素赋予不同的className

<div className={isScroll?'a b':'a'}>abc</div>

但判断是否出现滚动条只能在客户端实现，这就造成了客户端和服务端的className不同，出现以下警告：

Prop className did not match. Server: "a" Client: "a b"

求解这种情况如何处理呢？(react的SSR)

Answer 1

逻辑有问题，是否有滚动条只能渲染完再判断，浏览器也存在分辨率差异，有些有滚动条有些没有。

Answer 2

使用client-only包裹 仅在客户端渲染

Answer 3

可不可以将判断isScroll的逻辑放在一个setTimeout中，强制将判断变为异步，这样应该就能保证当客户端开始渲染的时候，没有马上就计算isScroll的值，这样两端就会一样了。而异步线程执行完之后才会改变className。可以这样试试行不行

Answer 4

可以把 isScroll放在react的render完成的时候去做这件事 否则二次渲染不一致 不仅会抛出错误还会导致样式错乱