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. 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>

實際使用的數據是 object，我需要有條件地渲染並使用 v-if 傳遞給另一個組件。

我曾嘗試通過 get 獲取數據，監視數據並手動設置它們，但最終一切都崩潰了。

關於評論：如果我控制test數據，它將 go -> 在服務器上為true -> 在客戶端上為false ，然后在客戶端上再次為true ，如果我從v-if中刪除test - 如果它是：在服務器上為true ，在客戶端上為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>

Answer 5

如果它是一個小組件，你也可以使用 v-show 代替。