Next.js 13 App Router集成Apollo Client遇阻，求稳定解决方案

问题分析 #

• 服务器组件环境下，单例Apollo Client会跨用户共享缓存，引发数据泄露
• 官方实验性适配库存在竞态条件风险，仅在不使用Suspense时能避免该问题
• 自行实现的客户端创建逻辑存在缺陷：全局client变量导致服务器端无法为每个请求生成独立实例

修正后的客户端创建逻辑 #

要彻底避免服务器端数据泄露，需确保每个服务器请求对应独立的Apollo Client实例，浏览器端则复用单例：

const getClient = () => {
  // 浏览器端复用单例，避免重复初始化
  if (typeof window !== "undefined") {
    if (!window.__APOLLO_CLIENT__) {
      window.__APOLLO_CLIENT__ = new ApolloClient({
        link: new HttpLink({
          uri: "https://graph.staging.strollby.com/graphql",
        }),
        cache: new InMemoryCache(),
      });
    }
    return window.__APOLLO_CLIENT__;
  }

  // 服务器端每次请求都创建全新实例，隔离缓存
  return new ApolloClient({
    link: new HttpLink({
      uri: "https://graph.staging.strollby.com/graphql",
    }),
    cache: new InMemoryCache(),
  });
};

替代方案（无需实验性库） #

• 服务器端直接请求GraphQL：不依赖Apollo Client，使用fetch或graphql-request等工具发起请求，完全避开缓存共享问题
• 客户端组件专属Apollo Client：将数据请求逻辑封装到客户端组件中，服务器组件仅负责静态结构渲染，利用浏览器端的单例缓存正常工作
• 结合React Cache优化：使用React.cache包裹请求逻辑，确保服务器端同一路由请求的唯一性，同时和Apollo Cache做好隔离

实验性库使用参考 #

如果项目必须用到Apollo Client的完整特性，且无法规避Suspense：

• 关闭客户端组件的SSR渲染（通过"use client"结合动态导入），避免重叠查询引发的竞态条件
• 增加生产环境监控，待官方稳定版本发布后及时迁移升级

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