Question

如果我在v-if中使用从阿波罗获取的数据（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传递给另一个组件。

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

关于评论：如果我管理test数据，它将删除->服务器上的true-客户端上的false，然后再次在客户端上的true，如果我删除了{{1 }}从test开始：服务器上的v-if和客户端上的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，除非在<no-ssr>或<client-only>中换行，否则nuxt在SSR中将失败

v-if breaks nuxt ssr

4 个答案: