【问题标题】:The client-side rendered virtual DOM tree is not matching server-rendered content in Nuxt客户端渲染的虚拟 DOM 树与 Nuxt 中的服务器渲染内容不匹配
【发布时间】:2021-11-02 19:17:54
【问题描述】:

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

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.

【问题讨论】:

  • 嗨,到目前为止,您尝试了什么?关于在哪里找到问题有很多想法。评论和切换某些块可能会有所帮助。
  • @kissu 到目前为止我唯一尝试过的是仅限客户端的块,它可以工作,但我的问题是它为什么要这样做?这是一个 buefy 特定的事情,没有客户端,为什么它不会工作
  • 我的回答提供了示例并链接到从头开始解释它的文章。

标签: vue.js nuxt.js buefy


【解决方案1】:

嗯,客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配的原因可能是随机性的使用 - 更具体地说,@987654323 中 getRandomString 函数的使用@组件生成唯一ID的

正如@kissu 在他的answer 中指出的那样

任何随机都是有风险的

NewsListItem.vue 内的new Date() 也会导致问题,因为服务器上的结果Date 对象和客户端会导致客户端 VDom 与服务器生成的 HTML 不同...

【讨论】:

    猜你喜欢
    • 2021-05-27
    • 2020-04-12
    • 2019-01-14
    • 2020-02-03
    • 2020-05-13
    • 2020-05-16
    • 2021-06-08
    相关资源
    最近更新 更多