带有 v-if 的 Vue SSR。如何正确补水？答案

【问题标题】：Vue SSR with v-if. How to correctly perform hydration?带有 v-if 的 Vue SSR。如何正确补水？
【发布时间】：2021-12-18 18:03:51
【问题描述】：

我对 Vue SSR 有疑问。在我的项目中，我有一个名为 slug 的页面，根据在 asyncData 中接收到的数据，安装了适当的组件。它看起来或多或少是这样的：

<div>
  <component-a v-if='type === a' />
  <component-b v-else-if='type === b' />
  <component-c v-else-if='type === c' />
</div>

<script>
export default {
  asyncData({ store }) {
    store.dispatch('product/fetchAsync') 
  },
  computed () {
   type () {
     return this.$store.state.type
    }
  }
}
</script>

但是，Vue 无法执行 SSR 水合。是否有可能是由于 v-if 语句造成的？如何正确解决这个问题？我唯一能想到的是前缀并使每个组件成为一个单独的页面，没有 v-if。但客户希望避免这种情况。

【问题讨论】：

你可以做 <component :is="'component-' + type"></component> 并放弃 if/else's
顺便说一句，它会是v-if="type === 'a'"，你没有将a、b、c包装成字符串
我很确定您分享的 sn-p 没有任何补水问题。你能确定这是从哪里来的吗？
这很可能是因为您仅在客户端获取数据，然后根据数据更改 HTML 结构。这导致 Dom 结构在服务器端与客户端不同。服务器端：没有组件被渲染，因为类型未定义。客户端：渲染一个组件。这种不匹配会导致 SSR 水合停止。解决方案也在服务器中进行 fetch 调用，或者仅使用客户端包装您的组件（假设您使用的是 Nuxt）。
是的，基本上这个问题和那里的答案应该对你有很大帮助：stackoverflow.com/q/47862591/8816585

标签： vue.js nuxt.js server-side-rendering asyncdata

【解决方案1】：

正如一些 cmets 所说，您在服务器端（发生 ssr 的地方）的 html 结构不知道渲染项目或其他项目的条件是否为真。

您可以使用 v-show 代替 v-if。不同之处在于 v-show 将呈现该元素但没有数据。这样你的 html 就不会改变并且水合成功

【讨论】：