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

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

1. 检查客户端和服务器端渲染的一致性

• 原因: SSR 模式下，服务器端生成的 HTML 与客户端渲染的内容不一致，导致 Vue 的 hydration 过程失败。
• 解决方案:
  • 确保服务器端和客户端渲染的组件、数据、逻辑完全一致。
  • 检查是否存在只在客户端执行的代码（如 mounted 钩子中的逻辑），这类逻辑在服务器端不会执行，可能导致不一致。
  • 使用 onServerPrefetch 或 asyncData 方法确保数据在服务器端和客户端都能获取。

2. 避免使用浏览器特有的 API

• 原因: 服务器端没有 window、document 等浏览器特有的对象，如果在服务器端直接使用这些 API，会导致错误。
• 解决方案:
  • 将浏览器特有的 API 放在 mounted 钩子中执行，确保只在客户端运行。
  • 使用条件判断，如 if (process.client)，确保代码只在客户端执行。

3. 检查动态路由和异步组件

• 原因: 动态路由或异步组件在服务器端和客户端可能加载不一致。
• 解决方案:
  • 确保动态路由和异步组件的加载逻辑在服务器端和客户端一致。
  • 使用 import() 语法加载异步组件时，确保服务器端和客户端都能正确解析。

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

• 原因: 某些第三方库可能不支持 SSR，导致服务器端渲染失败。
• 解决方案:
  • 检查项目中使用到的第三方库是否支持 SSR。
  • 对于不支持 SSR 的库，可以通过动态加载的方式在客户端使用。

5. 检查 CSS 和样式问题

• 原因: CSS 样式在服务器端和客户端可能存在差异，导致渲染不一致。
• 解决方案:
  • 确保样式在服务器端和客户端一致。
  • 使用 scoped 样式或 CSS Modules 避免样式冲突。

6. 调试和日志输出

• 在服务器端和客户端分别输出日志，检查渲染过程中的差异。
• 使用 Vue Devtools 检查客户端渲染的组件树，与服务器端生成的 HTML 进行对比。

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

• 原因: uni-app 或相关依赖的版本可能存在 bug。
• 解决方案:
  • 更新 uni-app 到最新版本。
  • 更新 Vue、Vuex 等相关依赖。

示例代码

以下是一个简单的示例，确保服务器端和客户端渲染一致：

export default {
  async asyncData({ isServer }) {
    // 在服务器端和客户端都获取数据
    const data = await fetchData();
    return { data };
  },
  mounted() {
    // 只在客户端执行的逻辑
    if (process.client) {
      console.log(window.innerWidth);
    }
  }
};