当 DOM 太相似时，React SSR 和水合物出现问题

Question

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

我们有一个用 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 和新结果太相似就会崩溃。例如。

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

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

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

感谢任何提示或指示！

Answer 1

你提到的程序只有大约200行代码，考虑阅读它：https://github.com/markdalgleish/static-site-generator-webpack-plugin/blob/master/index.js另外，它看起来不像"having the same dom"是一个问题，因为代码没有出现乍一看有dom个比较例程，也许问题出在别处，而不是"having the same dom"。

当 DOM 太相似时，React SSR 和水合物出现问题

Having an issue with React SSR and hydrate, when the DOM is too similar

javascript

reactjs

webpack

server-side-rendering