javascript - nuxt3提示Hydration children mismatch in <div>？

Question

nuxt3+vue3+element-plus开发页面

正常跳转页面显示正常，要是刷新当前页面就提示

Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom.

这部分内容也显示不出来

有没有大佬知道这是啥情况？如何解决

Answer 1

这种问题通常是由于服务器端和客户端渲染的VDOM不一致所导致的。Hydration children mismatch的错误意味着服务器端渲染的元素与客户端通过JS生成的VDOM不一致。

可能的原因：

1. 你可能在服务器端渲染(SSR)时，使用了一些在客户端中不存在的元素或数据。这可能是因为某些组件或数据仅在客户端渲染时才可用。
2. 如果你使用了异步组件或数据，可能在服务器端渲染时，这些组件或数据还没有被加载，因此，服务器端渲染的VDOM与客户端的VDOM不一致。

解决方案：

1. 确保你在服务器端和客户端渲染时都使用了相同的组件和数据。
2. 如果你使用了异步组件或数据，确保在服务器端渲染时，这些组件或数据已经被正确加载。
3. 使用 nuxt.render() 或 nuxt.server() 函数来手动控制页面的渲染。例如，你可以在 beforeNuxtRender 生命周期钩子中调用这些函数，以手动控制页面的渲染。

这是一个代码示例：

export default {  // ...  async beforeNuxtRender({ store }) {    await store.dispatch('fetchData') // 假设 fetchData 是获取异步数据的 action    this.content = await store.dispatch('fetchContent') // 假设 fetchContent 是获取另一个异步数据的 action  },  // ...}

这样，在页面渲染之前，你的异步数据已经被加载并准备好了。这可以确保服务器端和客户端渲染的VDOM一致。