search

zhangyuang / egg-react-ssr

最小而美的Egg + React + SSR 服务端渲染应用骨架，同时支持JS和TS
http://doc.ssr-fc.com/
MIT License
1.91k stars 212 forks source link

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

Closed jiaiyan closed 4 years ago

jiaiyan commented 4 years ago

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

zhangyuang commented 4 years ago

好的，今晚看看

发自我的iPhone

------------------ Original ------------------ From: jiaiyan <notifications@github.com> Date: Sat,Jul 18,2020 8:06 PM To: ykfe/egg-react-ssr <egg-react-ssr@noreply.github.com> Cc: Subscribed <subscribed@noreply.github.com> Subject: Re: [ykfe/egg-react-ssr] Warning: Expected server HTML to contain a matching <div> in <div>. (#176)

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

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or unsubscribe.

zhangyuang commented 4 years ago

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

jiaiyan commented 4 years ago

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

jiaiyan commented 4 years ago

经观察 在 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)