Next.js使用Apollo Client时能否在getServerSideProps中获取客户端更新的缓存

问题结论 #

你无法直接在getServerSideProps中获取到客户端侧更新后的Apollo缓存，两者是完全隔离的运行环境，默认没有缓存同步机制。

核心原理 #

• getServerSideProps始终在服务端执行，无论是首次页面直出还是客户端路由导航回当前页面，每次请求都会触发服务端重新执行该函数，函数内初始化的apolloClient是全新的实例，和用户浏览器中运行的客户端Apollo实例没有任何关联。
• 你从getServerSideProps返回的initialApolloState仅用于首次初始化客户端的Apollo缓存，后续客户端执行查询产生的缓存更新只会存在于用户本地浏览器中，不会自动同步回服务端。

无缝工作流实现方案 #

你可以根据业务场景选择以下两种实现方式：

方案1：拆分查询逻辑，优先走客户端缓存（推荐）

这是官方推荐的标准实践：

1. 仅将首屏SSR必须的查询（比如SEO需要展示的内容、权限校验相关数据）放在getServerSideProps中执行。
2. 其他非必须SSR的查询全部放在客户端侧执行，给查询配置fetchPolicy: 'cache-first'，当用户导航回当前页面时，客户端会直接读取本地已有的缓存（包括你之前执行的第二个查询的结果），不需要等待getServerSideProps执行完，也不会触发多余的请求，完全实现无缝切换。

方案2：手动同步小体量缓存到服务端

如果确实有需要在服务端获取客户端缓存的特殊场景，可以手动做轻量化同步：

1. 客户端侧使用apollo3-cache-persist等工具将需要同步的缓存片段持久化到localStorage。
2. 客户端路由跳转时，将待同步的缓存数据写入请求cookie中。
3. 在getServerSideProps中通过context.req.cookies读取缓存数据，调用apolloClient.cache.restore()将数据恢复到当前服务端Apollo实例的缓存中即可使用。

注意：该方案仅适用于小体量缓存，cookie有4KB的大小限制，不要同步全量缓存，避免出现性能和安全问题。

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