突然发现一个页面的控制台报了一个错误:
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>。Bailing水合作用并执行完整的客户端渲染
我一开始很诧异,然后复制报错信息去网上搜索,得到的结果是添加<client-only>标签,我添加之后就好了。
<client-only>用途是使得组件只在客户端渲染,服务端不渲染。一些插件比如富文本插件,由于nuxt是SSR,渲染在服务器进行,服务器上并没有这些插件,所以只能在客户端(浏览器)上面渲染。