SSG场景下V-if引发页面加载闪烁的问题求解

方案1：用可选链操作符简化判断，保留初始渲染内容 #

Vue支持ES6的可选链操作符?.，可以替代层层嵌套的&&判断，既能避免空值读取错误，又不会清空SSR/SSG已经渲染好的DOM内容：

{{ post?.author?.name }}

原理：当客户端Apollo查询还未返回时，Vue不会因为空值判断移除已存在的文本节点，只会在数据就绪后完成Hydration绑定，完全不会出现页面闪烁。

方案2：延迟SSR直到Apollo查询完成 #

如果你的页面必须依赖完整数据才能渲染，不想先展示任何未完成内容，可以让Nuxt在SSR阶段等待Apollo查询结束：

方法A：用asyncData手动执行查询 #

在页面组件中通过asyncData钩子直接调用Apollo客户端，确保数据就绪后再渲染：

export default {
  async asyncData({ app }) {
    // 替换为你的GraphQL查询和变量
    const queryResult = await app.apolloProvider.defaultClient.query({
      query: YOUR_POST_QUERY,
      variables: { postId: 123 }
    })
    return { post: queryResult.data.post }
  }
}

方法B：开启Apollo智能查询的prefetch #

针对页面级的Apollo智能查询，设置prefetch: true，Nuxt会在SSR阶段预先执行查询：

export default {
  apollo: {
    post: {
      query: YOUR_POST_QUERY,
      variables: { postId: 123 },
      prefetch: true // 关键配置
    }
  }
}

两种方法都会让SSR输出的HTML包含完整数据，客户端Hydration时直接绑定，无闪烁无错误。

方案3：保留DOM初始内容到数据就绪（特殊场景用） #

如果需要完全保留SSR生成的文本直到客户端数据加载完成，可以用计算属性结合$el.textContent读取初始DOM内容，仅当数据就绪后替换：

注意：此方法存在XSS风险，仅当渲染内容为可信来源时使用

<template>
  <span v-html="authorName"></span>
</template>

<script>
export default {
  computed: {
    authorName() {
      // 优先用客户端数据，否则用SSR渲染的初始文本
      return this.post?.author?.name || this.$el?.textContent || ''
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者codycustard