zhangyuang/egg-react-ssr

Warning: Expected server HTML to contain a matching <div> in <div>.

Closed this issue · 4 comments

jiaiyan commented

你好，在我实现的example里，出现了一些意外，这个意外会导致页面错乱，因为刚接触ssr，所以需要你们的帮助，并将解决方案pr到我的仓库，以便我吸取经验，谢谢！
egg-ract-ssr

zhangyuang commented
  • 👍1
zhangyuang commented

1、不要自己监听push pop操作以及location来修改className。既不可靠也不正确。transition效果肯定不是这么做的。不然还用三方库干嘛
2、由于你用了第一种方式导致layout你display: none导致ssr完全没有任何意义
3、错误原因很明显是客户端第一次render的结果和server不匹配有问题

jiaiyan commented

@zhangyuang
1,那实现transition效果目前你那有成熟的解决方案么
2.display: none 主要是为了计算rem的时差做的（服务端渲染的时候不能去计算这个），否则字体大小会突然变化，目前还未优化
3.是因为我用了transition导致的吧 这个解决了1的问题就解决了这个问题吧

jiaiyan commented

经观察 在 web/layout/index.js commonNode 方法，输出的dom结构会不一致，目前我在这里加了个判断，已经不会出现这个问题了，如果有更好的解决办法，欢迎PR到我的example egg-react-ssr-antd-mobile-dva里面，再次感谢你们的帮助！

// 为了同时兼容ssr/csr请保留此判断，如果你的layout没有内容请使用 props.children ? <div>{ props.children }</div> : ''
const commonNode = props => (props.children ? __isBrowser__ ? props.children : <div className='router-wrapper'>{props.children}</div> : null)
  • 👍1