客户端呈现的虚拟DOM树与Nuxt中服务器呈现的内容不匹配。

Question

• 另一个答案介绍了如何调试这个问题，我就这样做了。
• 我得到了这个错误，我无法确定是什么导致它。我检查了HTML标记，似乎不是这个问题的根源
• 我在代码中使用了带有SSR的Nuxt。
• 下面是包含实际错误的代码框链接

如果有人能告诉我是什么导致了这个错误，我真的很感激。

The client-side rendered virtual DOM tree is not matching server-rendered content.
This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. 
Bailing hydration and performing full client-side render.

Answer 1

那么，客户端呈现的虚拟DOM树的原因可能是服务器呈现的内容不匹配，这可能是由于使用了随机性，更确切地说，是使用getRandomString函数在NewsList.vue组件中生成唯一ID。

@kissu在他的回答中指出

任何随机都是危险的。

new Date()在NewsListItem.vue中也会引起问题，因为服务器上的Date对象和客户端将导致客户端VDom与服务器生成的VDom不同.