NextJS搭配SWR结合getServerSideProps分页切换数据闪现如何解决？

你的问题由两个配置缺陷共同导致：

1. 全局传入了仅适用于第一页的initialData：你给所有分页对应的SWR请求都统一传入了服务端返回的第一页数据作为初始值，当切换到未缓存的新页码时，SWR会优先用这个第一页的初始值渲染，才会出现闪现第一页的现象。
2. 未开启旧数据保留配置：默认情况下SWR在请求key（你的分页接口地址）变化时，会直接清空当前data，等待新请求返回后再渲染，没有保留上一页的数据。

修改SWR的配置即可，核心是两点：仅给第一页传入初始数据、开启上一页数据保留开关keepPreviousData，开启后当请求key变化时，SWR会保留上一次返回的数据直到新请求完成，完全符合你要的「保留上一页数据直到新页加载完成」的需求。

修改后的代码示例：

function Page ({ pageIndex, props }) {
  // 新增isLoading状态可用于自定义加载提示
  const { data, error, isLoading } = useSWR(
    `http://127.0.0.1:8000/api/pages/?page=${pageIndex}`, 
    fetcher, 
    {
      dedupingInterval: 15000, 
      // 只有第一页使用服务端返回的初始数据，其他页码不传该值
      initialData: pageIndex === 1 ? props.pages : undefined, 
      revalidateOnFocus: false,
      // 开启保留上一页数据配置
      keepPreviousData: true
    }
  );
  // 可选：加载新页时展示加载提示，进一步优化体验
  if (isLoading) return <p>页码加载中...</p>
  return (
    data.results.map(page => <p key={page.id}>{page.content}</p>)
  )
}

• 建议将Page组件的props参数重命名为更语义化的serverInitialPages，避免和组件本身的props对象产生歧义
• 现有dedupingInterval:15000配置已经可以缓存15秒内请求过的页码数据，切换回已加载过的页码时不会重复发请求，符合常规分页场景的需求

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