v-if 中断 nuxt ssr

Question

如果我在 v-if 中使用从 apollo 获取的数据（fetchPolicy:'cache-and-network'），它会抛出 vue.runtime.esm.js:619 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

<template>
  <div
    <div v-if="test">
      {{ test }}
    </div>
  </div>
</template>

但如果我将它用作变量来渲染它就可以正常工作。

<template>
  <div>
    {{ test }}
  </div>
</template>

实际使用的数据是对象，我需要有条件地渲染并通过 v-if 传递给另一个组件。

我曾尝试通过 get 获取数据，监视数据并手动设置它们，但最终一切都崩溃了。

关于评论： 如果我控制台 test 数据它将去 -> 服务器上的 true -> 客户端上的 false 然后再次在客户端上 true，如果我从 v-if 中删除 test 它会去：@服务器上的 987654331@ 和客户端上的 true

这与结构无关，在实际项目中它有一堆组件，如果数据没有在条件下使用它就可以正常工作

Answer 1

对于面临同样问题的任何人，我已通过在挂载后设置 cache-and-network 来修复它，一切正常。

mounted() {
  this.$apollo.queries.getCampaign.setOptions({
    fetchPolicy: 'cache-and-network',
  })
}

Answer 2

您试图使组件的根元素有条件地消失，这会在虚拟 DOM 中造成不一致。

你可以试试：

<template>
  <div>
    <template v-if="test">
      {{ test }}
    </template>
  </div>
</template>

Answer 3

SSR 有时难以调试，此类问题经常发生。

https://ssr.vuejs.org/#why-ssr

一些外部库可能需要特殊处理才能运行 在服务器渲染的应用中。

这可能是重点。一些 vue 组件无法通过 SSR 开箱即用地运行。这就是我询问服务器内容的原因。

因此，最简单的解决方法是使用 <no-ssr> 标记包装您的组件。您可以分别对每个组件执行此操作，以找出导致问题的原因。 隔离组件后，您可以在其上保留<no-ssr> 标签并将其功能迁移到客户端组件的挂载区域。

Answer 4

根据我的经验，如果您使用 v-if，nuxt 将在 SSR 中失败，除非您使用 <no-ssr> 或 <client-only> 换行