调试服务器渲染的样式化jsx与客户端渲染的jsx

Question

交叉发布在这里https://github.com/zeit/next.js/discussions/11489

摘要：我们的“英雄”组件具有两种状态；最初，在加载数据/文本时，它会填充null和undefined，然后在加载数据时，它会在数据中渲染图像和文本。我们正在使用带有SSR的apollo-client，因此它对React树进行了两次遍历，以：1）触发无头CMS数据的下载，以及2）使用水合数据渲染React树。

但是，在我们的一个页面（只有其中一个页面）上，加载此错误：

index.js：1警告：道具className不匹配。服务器：“ jsx-349921261”客户端：“ jsx-4280868776”

所有其他页面都可以使用，但是它们之间的数据显然不同。 如何调试导致应用不同的jsx类的原因？（据我所知），我从服务器获得了良好的输出，但是这会导致重新加载所有无头CMS数据客户，可能是因为React树无法正确地重新补水。

有问题的代码如下所示：

这是源代码形式（附录A）。

反应弄乱了箱子的跟踪

这不是一个超级大的问题，如果它以一种非常奇怪的方式影响布局的话；发生上述警告时，反应搞砸了，并且无法在两个框中跟踪内容，因此看起来像这样：

实际情况应该是这样：

（在客户端导航到它时执行的操作）

如何调试/解决这个问题？

附录A-源代码