Nuxt SSR中v-if使用Apollo缓存数据引发hydration不匹配告警

这个问题我之前在SSR项目里也碰到过，核心原因就是服务端渲染时的初始数据和客户端hydrate阶段的初始数据不一致，导致Vue对比DOM树时发现结构不匹配，最终抛出警告并重新做客户端渲染。结合你描述的test值变化（服务端→true，客户端先false再true），本质就是客户端初始化时Apollo的缓存还没同步服务端的状态，导致v-if的DOM结构和服务端渲染的不一样。

下面给你几个针对性的解决方案：

1. 同步服务端Apollo缓存到客户端（最根本的解决方式） #

Apollo SSR的核心就是要把服务端渲染时生成的缓存数据同步给客户端，这样客户端初始化Apollo Client时就能直接拿到和服务端一致的初始数据，避免hydrate阶段数据不一致。

具体步骤：

• 在服务端渲染的入口文件中，渲染完成后提取Apollo的缓存状态，注入到页面的全局变量中：

  // 服务端渲染逻辑
  import { ApolloClient, InMemoryCache } from '@apollo/client';
  
  async function render(req, res) {
    const apolloClient = new ApolloClient({
      uri: '你的GraphQL地址',
      cache: new InMemoryCache(),
      ssrMode: true, // 开启SSR模式
    });
  
    // 执行数据查询，确保服务端拿到数据
    await apolloClient.query({ query: YOUR_QUERY });
  
    // 提取缓存状态
    const apolloState = apolloClient.cache.extract();
  
    // 把缓存状态注入到HTML模板中
    const html = `
      <!DOCTYPE html>
      <html>
        <head>...</head>
        <body>
          <div id="app">${vueRenderedContent}</div>
          <script>
            window.__APOLLO_STATE__ = ${JSON.stringify(apolloState).replace(/</g, '\\u003c')}
          </script>
        </body>
      </html>
    `;
  
    res.send(html);
  }
  

• 在客户端初始化Apollo Client时，使用全局变量的缓存状态作为初始缓存：

  // 客户端入口文件
  import { ApolloClient, InMemoryCache } from '@apollo/client';
  
  const apolloClient = new ApolloClient({
    uri: '你的GraphQL地址',
    cache: new InMemoryCache().restore(window.__APOLLO_STATE__), // 恢复服务端的缓存
    ssrForceFetchDelay: 100, // 可选，延迟客户端重新请求的时间，确保hydrate完成
  });
  

这样客户端初始化时，test的初始值就和服务端一致为true，v-if的DOM结构匹配，hydration就能正常进行。

2. 用v-show替代v-if（快速临时方案） #

如果你的业务场景允许，把v-if换成v-show可以快速解决问题。因为v-show只是通过CSS控制元素的显示/隐藏，DOM结构在服务端和客户端始终保持一致，不会出现hydration时的结构不匹配问题：

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

注意：这个方案适合组件内容不复杂、初始渲染成本低的场景，如果组件很庞大，v-show会导致不必要的DOM渲染，需要谨慎使用。

3. 用<client-only>隔离客户端渲染内容 #

Vue提供的<client-only>组件可以让内部内容只在客户端渲染，服务端不会处理这部分代码，从根源上避免服务端和客户端的DOM结构差异：

<template>
  <div>
    <client-only>
      <div v-if="test"> 
        {{ test }}
        <!-- 传递对象给子组件的示例 -->
        <ChildComponent :data="yourObjectData" />
      </div>
    </client-only>
  </div>
</template>

不过这个方案会导致服务端不渲染这部分内容，可能影响SEO，适合对SEO要求不高的场景。

4. 调整Apollo的fetchPolicy（按需选择） #

如果业务允许，可以尝试将fetchPolicy改为cache-first（优先使用缓存，无缓存再请求），但前提是已经完成服务端缓存到客户端的同步，这样客户端初始会直接用缓存数据，不会出现先false再true的状态波动。

总结下来，方案1是最推荐的，它从根源上解决了服务端和客户端数据不一致的问题，确保hydration正常进行，同时不影响业务逻辑和SEO。

内容的提问来源于stack exchange，提问作者Lukáš Gibo Vaic