我正在尝试构建一个与Pinterest非常类似的布局，其中包括react-virtualized Masonry，WindowScroller和AutoSizer组件。事实上，它与the sample given on their official website没什么不同。此外，我正在使用nextjs并且更喜欢为此布局启用服务器端渲染。
为了在服务器端生成网格项，根据反应虚拟化文档，我将一些随机值设置为WindowScroller的serverHeight和serverWidth道具以及AutoSizer的defaultHeight和defaultWidth道具。但是，由于这些值与实际浏览器宽度和高度不同，因此服务器和客户端在初始渲染中生成不同数量的网格项。这使得服务器生成的HTML标记与客户端生成的HTML标记不匹配，而React会发出以下警告。
Warning: Did not expect server HTML to contain a <div> in <div>.
如何通过使服务器和客户端在初始呈现中生成相同数量的网格项或指示React简单地进行必要的更改以使服务器生成的标记与客户端生成的标记匹配来消除此警告？< / p>