uni-app SSR方式发行，创建的默认模板报错：Hydration completed but contains mismatches. 页面白屏问题

uni-app SSR方式发行，创建的默认模板报错：Hydration completed but contains mismatches. 页面白屏问题

操作步骤：

  • 创建默认模板项目 按官网操作SSR发行

预期结果：

  • 能展示模板的hello word

实际结果：

  • 页面白屏 报错

bug描述：

创建新项目选择默认模板，选择个人的云服务，未改一行代码，完全按照官网SSR发行步骤进行操作，打包部署后页面白屏，报错 【Hydration completed but contains mismatches.】

相关链接 ：

信息类型 详细信息
产品分类 uniCloud/App
App下载地址 https://api.guokaidianda.cn/uni-ssr

更多关于uni-app SSR方式发行，创建的默认模板报错：Hydration completed but contains mismatches. 页面白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app SSR方式发行，创建的默认模板报错：Hydration completed but contains mismatches. 页面白屏问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在使用 uni-app 进行 SSR（Server-Side Rendering，服务端渲染）方式发行时，如果遇到 Hydration completed but contains mismatches 的错误，并且页面出现白屏问题，通常是由于客户端渲染的内容与服务端渲染的内容不一致导致的。以下是一些可能的原因和解决方法：

1. 检查数据一致性

确保服务端和客户端的数据完全一致。如果服务端渲染的数据与客户端渲染的数据不一致，就会出现 Hydration 不匹配的情况。

  • 解决方法：在服务端和客户端使用相同的数据获取逻辑，确保数据的一致性。可以在 asyncData 或 fetch 方法中获取数据，并确保在服务端和客户端都使用相同的逻辑。

2. 检查动态内容

如果页面中有动态生成的内容（如 v-if、v-for 等），确保这些内容在服务端和客户端渲染时保持一致。

  • 解决方法：避免在 mounted 或 created 生命周期钩子中修改 DOM 结构，因为这些钩子只在客户端执行。可以使用 nuxtServerInit 或 asyncData 来确保在服务端和客户端都生成相同的内容。

3. 检查第三方库

某些第三方库可能会在客户端渲染时修改 DOM 结构，导致与服务端渲染的内容不一致。

  • 解决方法：确保第三方库在服务端和客户端的行为一致，或者在客户端渲染时再加载这些库。

4. 检查 CSS

CSS 的加载顺序或样式差异也可能导致 Hydration 不匹配。

  • 解决方法：确保服务端和客户端的 CSS 加载顺序一致，并且样式没有差异。

5. 检查页面结构

确保页面结构在服务端和客户端渲染时保持一致。例如，某些 HTML 标签可能在服务端和客户端渲染时有所不同。

  • 解决方法：检查页面结构，确保服务端和客户端渲染的 HTML 完全一致。

6. 使用 v-cloak 解决闪烁问题

如果页面在 Hydration 过程中出现闪烁，可以使用 v-cloak 来隐藏未渲染的内容。

<div v-cloak>
  <!-- 页面内容 -->
</div>

<style>
  [v-cloak] {
    display: none;
  }
</style>
回到顶部