nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题

[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.

这个问题大致的意思就是，HTML结构嵌套不正确，我项目中出现的情况是：使用了element-ui中的<el-container>里面嵌套了一个<el-header>导致渲染出来的结果是一个<section>里面嵌套了一个<header>标签，导致了这样的情况。

最近发现这个问题的描述其实十分的清晰：服务端与客户端渲染的DOM结构不一样。上图中出现的这个问题是element-ui没有允许在服务端使用导致的。

将ssr的配置改为true，让element-ui能在服务端调用，直接渲染DOM结构，那么控制台就清净了。

原文地址：https://www.cnblogs.com/chenyablog/p/10278427.html

时间： 2024-10-15 10:44:34

nuxt.js踩坑之 - SSR 与 CSR 显示不一致问题的相关文章

react js踩坑之路（一）

讲真如果让我选个主流的mvvm框架做项目,我会果断选择vue,写起来不要太方便哦.但是,pc端要兼容ie8这个坑货,所以pc端只好选用react了啦~移动端果断用vue咯 再来讲讲构建工具,还是基于webpack 和 gulp,然后将react和vue 分开打包相关配置如下 webpack会依次将公用的打包到vendors.js .react的打包到react中,vue相关的打包到vue中,最后剩下的部分打包到load.js中. 下面直接用react实现一个后台页面的container组件吧,这

layui的引用js踩坑

前言: 今天因为项目需要,需要使用layui,因为本身不多的前端经验,以为layui的用法和其他的前端框架,例如jquery,bootstrap等等,只需要直接引入layui.js,和layui.css就可以直接使用了,但是在我使用的时候,却一直提示找不到我use的那个模块,因为这个问题折腾了一下午,终于找到原因,特此记录 出现这个问题的原因,主要是因为没有从头开始看文档,一开始接触的时候,直接去百度搜用法,但是其他地方的各种博客什么的,只是告诉你引入layui.js和layui.css这个步骤

使用video.js踩坑。单页切换后无法播放

问题:动态创建多个video实例后,切换其他页面后在切换回来,无法播放,控制台报警告id被占用! 思路:在生命周期beforeDestroy函数中销毁创建的video实例. 代码: beforeDestroy(){ //(第三步)在销毁之前拿到video实例 for(let i=0;i<this.playlist.length;i++){ this.playlist[i].dispose(); //(第四步)dispose()是官方的销毁函数 } }, mounted() { setTimeou

Nuxt.js（开启SSR渲染）

为什么要用Nuxt? 1.SEO 我们需要搜索引擎更多地抓取到我们的内容,更详细地认识到我们的网页结构,而不是仅对首页或特定静态页进行索引.再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及,很多人想用Vue开发多页应用,并在服务端完成渲染.这时候就出现了Nuxt.js这个框架,她简化了SSR的开发难度.还可以直接用命令把我们制作的vue项目生成为静态html.  Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没

Nuxt.js开启SSR渲染

第一节:nuxt.js相关概述 nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染).Vue.js是开发SPA(单页应用)的,Nuxt.js这个框架,用Vue开发多页应用,并在服务端完成渲染,可以直接用命令把我们制作的vue项目生成为静态html. 1.那服务器端渲染到底有什么好处呢? 主要的原因时SPA(单页应用)不利于搜索引擎的SEO操作,Nuxt.js适合作新闻.博客.电影.咨询这样的需要搜索引擎提供流量的项目.如果你要作移动端的项目,就没必要使用这个框

Vue（踩坑）vue.esm.js?efeb:628 [Vue warn]: Error in render: &quot;TypeError: Cannot read property &#39;0&#39; of undefined&quot; found in

1.项目报错如下 2.原因: 异步显示的数据先显示vuex中的初始数据,再显示请求的数据,一开始在vuex中state中的初始数据为空,报错是因为在显示初始数据的时候报错 3.解决:避免在没有数据的时候显示解析(有数据才解析) 有数据的时候div才存在,用v-if控制一下 5.总结:表达式有一层表达式(a),二层表达式(a.b),三层表达式(a.b.c), 当表达式三层的时候就有问题:比如a开始为空,a.b:的结果为undefined, a.b.c你再取的时候就会报错了 Vue(踩坑)vue.e

vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候,就慢慢的查到这些方案   老司机可以忽略下面的内容了 1)起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器,给浏览器去解析,渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中,然后在通

网站移动版本开发踩坑实录一

最近公司项目需要开始做wap版本开发,虽然在上一家公司也有做过类似的工作,由于当时公司产品没有严格要求适配各个移动设备,也并没有很多动作效果和图片自适应这类的效果,相对来说体系没有那么成熟,更多是在wap版本上可以用就ok了(其实更多的工作集中在功能和cssser身上,交互效果没有那么强,唯一做的好玩一点的工作是菜单滑动.图片缩放［未被上线过］),因此基本上没有在移动端踩各种坑:说了这么多上一家公司的wap版本,下面开始讲讲现在做的项目让我在wap版本上踩的各种坑开始说起.   第一坑:技术选型

jQuery版本升级踩坑大全

背景 -------------------------------------------------------------------------------- jQuery想必各个web工程师都再熟悉不过了,不过现如今很多网站还采用了很古老的jQuery版本.其实如果早期版本使用不当,可能会有DOMXSS漏洞,非常建议升级到jQuery 1.9.x或以上版本.前段时间我就主导了这件事情,把公司里我们组负责的项目jQuery版本从1.4.2升级到了jQuery 1.11.3.jQuery官