vue和nuxt的整合项目报错【Vue warn】: The client-side rendered virtual DOM tree is....并且页面的生命周期函数执行两次，彻底解决方案！

问题描述：
      当我在做一个查询课程详情的功能时候，想顺便在后台修改课程的浏览量，即让它加1，但发现每次刷新页面，数值竟然增加两次！
      于是我在这个页面的生命周期函数里面打印东西，发现每次打印的都是两次，也就是说，不知道为什么生命周期函数执行了两次，而且一直让我在意的是，浏览器控制台总是莫名其妙的打印出警告信息：

vue.runtime.esm.js?2b0e:619 【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. 

      最可恨的是，我尝试打包这个项目【npm run build】,然后使用生产环境进行运行【npm run start】。运行以后，页面竟然报错，大概意思是不能向node添加子标签，整个页面很多内容都无法显示。这时候，我就知道，肯定出了很大的问题，事关整个项目，因为打包以后还有问题，就关系部署，这种问题很烦人。

于是我搜集了很多的资料，最终没有找到根本原因，但是经过不断尝试，却无意中发现了一个彻底的解决办法，只要在布局文件里面添加如下图所示的标签，即可解决，让 no-ssr 这个双标签包含所有内容。大不了每个布局文件都如图添加上这个标签。而且打包和部署都没有了问题！

如果有哪位大佬知道根本原因，并且为什么这样解决，请评论告诉我，我将万分感谢！！！！