Next.js事件触发时如何在服务端重取带新变量的Apollo查询

你在Next.js的getServerSideProps中通过Apollo Client发起列表查询，初始实现代码如下：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { data } = await searchApolloClient.query({
    query: LIST_QUERY,
    variables: {
      language: 'en',
    },
  });

  return {
    props: {
      listProps: data,
    },
  };
};

需要实现的交互为：下拉选项变更时，将选中项id作为查询变量传入，在不刷新页面的前提下重新获取最新结果。你已经了解到客户端可使用useLazyQuery实现该效果，想确认是否存在直接在服务端重取数据的实现方式。

不存在纯客户端交互下直接触发服务端重跑getServerSideProps返回新数据、且完全不经过客户端请求链路的实现。
getServerSideProps是Next.js服务端渲染阶段的执行逻辑，仅在三类场景下触发：用户首次访问页面、手动硬刷新页面、客户端路由跳转且关闭浅路由模式时。下拉选择属于纯客户端交互，默认不会触发该函数执行。

• 优先选择客户端Apollo查询方案（完全匹配无刷新需求）
  首屏初始数据保留现有getServerSideProps逻辑即可，能保证首屏加载速度和SEO效果。下拉选项变更时，直接使用useLazyQuery，或者通过useQuery将选中id作为变量传入，变量变化时Apollo会自动发起新请求拉取结果，全程无页面刷新。

  不需要担心该方案的数据来源问题：客户端发起的GraphQL请求本身就是对接你的服务端接口，数据来源和getServerSideProps中调用的接口完全一致，只是触发请求的动作放在了客户端执行。同时Apollo自带的缓存机制会自动缓存已请求过的变量对应结果，重复选择同一项不会重复发起请求，交互流畅度更高。

• 不推荐的getServerSideProps触发方案
  如果一定要复用getServerSideProps内的查询逻辑，可以在下拉变更时将选中id拼接至页面URL的query参数中，调用路由方法做非浅路由跳转，触发Next.js在服务端重新执行getServerSideProps，再将新的props传回客户端。但该过程会触发页面组件重新渲染，丢失当前页面其他未持久化的交互状态，还会出现明显的加载卡顿，完全不适合下拉筛选这类高频交互场景。

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