当 DOM 过于相似时，React SSR 和水合物出现问题答案

【问题标题】：Having an issue with React SSR and hydrate, when the DOM is too similar当 DOM 过于相似时，React SSR 和水合物出现问题
【发布时间】：2019-03-08 15:55:51
【问题描述】：

我遇到了一个小问题，希望我能在这里找到解决方案。

我们有一个使用 React 创建的网站，我们使用这个包进行服务器端渲染，并将生成的文件扔到 S3 中。

https://github.com/markdalgleish/static-site-generator-webpack-plugin

然后我们做 ReactDom.hydrate，就像

if (typeof document !== 'undefined') {
    ReactDOM.hydrate(
        <BrowserRouter context={{}} initialEntries={['/']} initialIndex={0}>
            { renderRoutes(Routes) }
        </BrowserRouter>,
        document.getElementById('root')
    );
}

附加事件侦听器，并更改登录用户的内容和排序。

通常一切都很好，但如果 SSR 结果上的 DOM 和新的 DOM 过于相似，它就会中断。例如。

<nav>
    {!isLoggedin && <a href="/login">Login</a>}
    {isLoggedin && <a href="/options">Options</a>}
</nav>

在这种特殊情况下，isLoggedIn 在 SSR 上始终为 false，因此登录按钮将首先呈现。然后水合物将变为显示选项按钮；出现选项词但 href 仍然相同，这很糟糕。

我尝试使用 key 属性，或更改其他一些属性，它们被忽略了，但除了使 DOM 不同之外，我还没有找到防止这种情况的方法，但并不总是可能的，就像在那个菜单示例中一样.

任何提示或指针表示赞赏！

【问题讨论】：

标签： javascript reactjs webpack server-side-rendering

【解决方案1】：

你提到的程序只有大约 200 行代码，考虑阅读它：https://github.com/markdalgleish/static-site-generator-webpack-plugin/blob/master/index.js 还有，它看起来不像“具有相同的 dom”是一个问题，因为代码似乎没有 dom乍一看比较例程，也许问题出在其他地方，而不是“具有相同的 dom”。

【讨论】：