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.】
17 回复

此问题已协助用户解决。 此后类似的问题需要检查如下配置： 发布为WEB注意事项 由于很多用户会漏掉此配置，后续会在官网文档补充更新注意事项

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


感谢反馈，这边排查下

麻烦尽快修复下，或者告知下本地修改哪里，我们项目要上线了，非常着急，谢谢谢谢谢！

我测试了一下未复现该问题，你把你的HBX升级到最新的alpha版本试试，最新版本的HBX修复了部分SSR的bug

老师，hbx是最新的版本，我这边录制了个屏，您看下 https://guokaidianda.cn/20240301_150628.mp4

回复 eric_peng: 我反复检查了你视频里的步骤，你的没有导入插件市场的SSR，你的云函数上传怎么这么慢？ 请参考这里的前置步骤配置一下，https://uniapp.dcloud.net.cn/tutorial/ssr.html#distribute-unicloud

回复 HRK_01: 老师再看下，从插件市场导入SSR，按步骤发行还是不行，https://guokaidianda.cn/20240304_114623.mp4

回复 eric_peng: 应该是服务器配置有问题，可以参考这篇文章改一下https://blog.csdn.net/weixin_46375853/article/details/134340853

回复 HRK_01: 老师你再看下最后一个视频，往最后最后拉，我的部署后域名是 https://api.guokaidianda.cn/uni-ssr，你可以访问下；

回复 eric_peng: 最后那个视频我看了，前面步骤没什么问题，现在是云函数报错，如果不是服务器的问题的画，那就是云函数URL化没有配置对，你的云函数url化配置好了吗？https://doc.dcloud.net.cn/uniCloud/http.html#steps

回复 HRK_01: 配置了的，我截图贴上来

URL化截图

感谢反馈，我发现在社区上已有过类似问题，正在排查当中，以后会在文档上补充相关注意事项和实例

回复 HRK_01: 有解决方案了，麻烦告知下，项目近期要上线，谢谢谢谢

回复 HRK_01:老师，排查的咋样了，我这边可以提供账号配合测试

回复 eric_peng: 私信你了，在私信里提供一下账号信息吧

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

1. 检查 HTML 结构一致性

  • 问题原因: 服务器端渲染的 HTML 结构与客户端渲染的 HTML 结构不一致，导致 Vue 在客户端进行 hydration 时发现不匹配。
  • 解决方法: 确保服务器端和客户端的模板、组件、数据等完全一致。检查是否有条件渲染（如 v-if）在服务器端和客户端执行时产生不同的结果。

2. 检查异步数据的获取

  • 问题原因: 如果异步数据在服务器端和客户端获取的结果不一致，可能会导致渲染内容不匹配。
  • 解决方法: 确保在服务器端和客户端获取异步数据的方式一致，并且数据获取的逻辑在两端都能正确执行。可以使用 asyncData 或 fetch 方法来确保数据在服务器端和客户端都能正确获取。

3. 检查全局状态管理

  • 问题原因: 如果使用了全局状态管理（如 Vuex），在服务器端和客户端的初始状态可能不一致。
  • 解决方法: 确保在服务器端和客户端初始化的全局状态一致。可以在服务器端渲染时将初始状态注入到 HTML 中，并在客户端初始化时使用该状态。

4. 检查第三方库的兼容性

  • 问题原因: 某些第三方库可能在服务器端和客户端的表现不一致，导致渲染内容不匹配。
  • 解决方法: 确保使用的第三方库支持 SSR，并且在服务器端和客户端的表现一致。可以在 mounted 钩子中执行仅在客户端运行的代码。

5. 检查时间相关的代码

  • 问题原因: 如果代码中使用了时间相关的逻辑（如 new Date()），在服务器端和客户端执行的时间可能不同，导致渲染内容不匹配。
  • 解决方法: 尽量避免在服务器端和客户端使用时间相关的逻辑，或者在服务器端和客户端统一处理时间。

6. 检查样式和类名

  • 问题原因: 如果样式或类名在服务器端和客户端不一致，可能会导致渲染内容不匹配。
  • 解决方法: 确保样式和类名在服务器端和客户端一致，避免在服务器端和客户端动态修改样式或类名。

7. 检查 SSR 配置

  • 问题原因: 如果 SSR 配置不正确，可能会导致渲染内容不匹配。
  • 解决方法: 检查 uni-app 的 SSR 配置，确保配置正确。可以参考 uni-app 官方文档进行配置。

8. 调试和日志

  • 问题原因: 如果没有详细的调试信息，可能难以定位问题。
  • 解决方法: 在服务器端和客户端添加详细的日志，帮助定位问题。可以使用 console.log 或调试工具来查看服务器端和客户端的渲染结果。

9. 使用 clientOnly 组件

  • 问题原因: 如果某些组件或逻辑只能在客户端运行，可能会导致 SSR 渲染不匹配。
  • 解决方法: 使用 clientOnly 组件包裹只能在客户端运行的代码，确保这些代码不会在服务器端执行。

10. 更新 uni-app 和相关依赖

  • 问题原因: 如果 uni-app 或相关依赖版本过旧，可能存在已知的 SSR 问题。
  • 解决方法: 更新 uni-app 和相关依赖到最新版本，确保使用的是最新修复的版本。

示例代码

<template>
  <div>
    <h1>{{ title }}</h1>
    <p v-if="showContent">{{ content }}</p>
  </div>
</template>

<script>
export default {
  asyncData({ store, route }) {
    return store.dispatch('fetchData', route.params.id);
  },
  computed: {
    title() {
      return this.$store.state.title;
    },
    content() {
      return this.$store.state.content;
    },
    showContent() {
      // 确保服务器端和客户端的条件一致
      return this.$store.state.showContent;
    }
  }
};
</script>
回到顶部