客户端渲染的虚拟 DOM 树与 Nuxt 中服务器渲染的内容不匹配
The client-side rendered virtual DOM tree is not matching server-rendered content in Nuxt
- 我遇到了这个错误，但我无法确定是什么原因造成的。我检查了 HTML 标记，但似乎不是此问题的根源
- 我在我的代码中使用带有 SSR 的 Nuxt
- Here is the codesandbox link with the actual error in it
如果有人能告诉我是什么导致了这个错误，我将不胜感激
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.
嗯，客户端呈现的虚拟 DOM 树与服务器呈现的内容不匹配的原因 可能是随机性的使用 - 更具体地说是使用NewsList.vue 组件中的 getRandomString 函数生成唯一 ID 的
正如@kissu 在他的
中指出的那样
any random is risky
new Date() inside NewsListItem.vue 也会导致问题，因为结果 Date 对象在服务器和客户端上会有所不同，导致客户端 VDom 与生成的 HTML 不同按服务器...
- 我遇到了这个错误，但我无法确定是什么原因造成的。我检查了 HTML 标记，但似乎不是此问题的根源
- 我在我的代码中使用带有 SSR 的 Nuxt
- Here is the codesandbox link with the actual error in it
如果有人能告诉我是什么导致了这个错误，我将不胜感激
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.
嗯，客户端呈现的虚拟 DOM 树与服务器呈现的内容不匹配的原因 可能是随机性的使用 - 更具体地说是使用NewsList.vue 组件中的 getRandomString 函数生成唯一 ID 的
正如@kissu 在他的
any random is risky
new Date() inside NewsListItem.vue 也会导致问题，因为结果 Date 对象在服务器和客户端上会有所不同，导致客户端 VDom 与生成的 HTML 不同按服务器...