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与新的DOM过于相似，则会中断。例如。

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

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

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

任何提示或指示，不胜感激！

Answer 1

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

DOM过于相似时，React SSR和水合物有问题

1 个答案: