The client-side rendered virtual DOM tree is not matching server-rendered content.

最近发现了一个挺厉害的人工智能学习网站，内容通俗易懂，风趣幽默，感兴趣的可以点击此链接进行查看：床长人工智能教程

废话不多说，请看正文！

nuxt项目报错：

[Vue warn]: 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树与服务器呈现的内容不匹配。这可能是由不正确的HTML标记引起的，例如在<p>中嵌套块级元素，或者缺少<tbody>。打捞水化并执行完整的客户端渲染。

报错原因：服务端与客户端渲染的DOM结构不一样。

解决方法：在该element-ui组件最外层加上<client-only>组件，该组件只是占位且用于仅在客户端渲染其他组件。

The client-side rendered virtual DOM tree is not matching server-rendered content.相关推荐

当我们谈论Virtual DOM时，我们在说什么——etch源码解读
etch简介首先我们有必要介绍一下etch. etch是atom团队下的开源项目,是一套非常简洁然而功能十分完善的virtualDOM机制.我在偶然的情况下接触到了这个开源项目,在读README时为 ...
Vue源码分析系列四：Virtual DOM
前言当我们操作Dom其实是一件非常耗性能的事,每个元素都涵盖了许多的属性,因为浏览器的标准就把 DOM 设计的非常复杂.而Virtual Dom就是用一个原生的JS对象去描述一个DOM节点,即VNo ...
vue源码分析系列三：render的执行过程和Virtual DOM的产生
render 手写 render 函数,仔细观察下面这段代码,试想一下这里的 createElement 参数是什么 . new Vue({el: '#application',render(crea ...
深度剖析：如何实现一个 Virtual DOM 算法
作者:戴嘉华链接:https://github.com/livoras/blog/issues/13 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4 ...
濡備綍瀹炵幇涓€涓-Virtual DOM 鍙婃簮鐮佸垎鏋-- 榫欐仼0707
濡備綍瀹炵幇涓€涓?Virtual DOM 鍙婃簮鐮佸垎鏋?/p> Virtual DOM绠楁硶 web椤甸潰鏈変竴涓搴旂殑DOM鏍戯紝鍦ㄤ紶缁熷紑鍙戦〉闈㈡椂锛屾瘡娆￠〉闈㈤渶瑕佽鏇存柊 ...
基于Virtual DOM与Diff DOM的测试代码生成
尽管是在年末,并且也还没把书翻译完,也还没写完书的第一稿.但是,我还是觉得这是一个非常不错的话题--测试代码生成. 当我们在写一些UI测试的时候,我们总需要到浏览器去看一下一些DOM的变化.比如,我们 ...
了不起的Virtual DOM(一)：起源
前言首先欢迎大家关注我的掘金账号和Github博客,也算是对我的一点鼓励,毕竟写东西没法获得变现,能坚持下去也是靠的是自己的热情和大家的鼓励. 之所以想写本系列文章的主要原因是将近一个月时间没有写点 ...
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode
Element DOM Tree jQuery plugin – Firebug like functionality | RockingCode Element DOM Tree jQuery pl ...
vue的Virtual Dom实现- snabbdom解密
vue在官方文档中提到与react的渲染性能对比中,因为其使用了snabbdom而有更优异的性能. JavaScript 开销直接与求算必要 DOM 操作的机制相关.尽管 Vue 和 React 都使 ...
[Javascript] Deep Search nested tag element in DOM tree
// For example you want to search for nested ul and ol in a DOM tree branch // Give example <ol&g ...

The client-side rendered virtual DOM tree is not matching server-rendered content.

The client-side rendered virtual DOM tree is not matching server-rendered content.相关推荐

最新文章

热门文章