SWR Infinite Loading 在 Next.js 应用路由中的 Fallback 机制解析

在 Next.js 13+ 的应用路由架构中，开发者在使用 SWR 库的 useSWRInfinite 实现无限加载功能时，可能会遇到 fallback 数据不按预期工作的问题。本文将深入分析这一现象的技术原理，并提供有效的解决方案。

问题现象

当开发者在客户端组件中使用 useSWRInfinite 并设置 fallback 数据时，即使已经提供了完整的初始数据，组件仍然会在客户端发起不必要的网络请求。这与开发者期望的"直接使用预取数据而不发起额外请求"的行为不符。

技术背景

SWR 的 fallback 机制原本设计用于服务端渲染(SSR)场景，允许开发者预先注入数据，避免客户端重复获取。在 Next.js 13+ 的应用路由中，这种机制需要特别注意以下几点：

1. 应用路由默认采用 React 服务端组件架构
2. 数据获取通常在服务端组件中完成
3. 客户端组件需要正确处理服务端预取的数据

关键问题分析

通过代码示例可以看出，开发者尝试通过以下方式设置 fallback：

fallback: {
  [unstable_serialize(() => 'key')]: [{ data: [], total: 0 }]
}

但这种方式在应用路由中失效的主要原因在于：

1. useSWRInfinite 默认会在组件挂载时重新验证数据
2. 应用路由的数据传递机制与传统 SSR 有所不同
3. 序列化方式可能不匹配应用路由的上下文

解决方案

经过实践验证，最有效的解决方法是显式关闭挂载时的重新验证：

{
  fallback: {
    [unstable_serialize(() => 'key')]: [{ data: [], total: 0 }]
  },
  revalidateOnMount: false
}

这种配置组合能够确保：

1. 服务端预取的数据被正确识别为初始状态
2. 组件挂载时不会触发额外的网络请求
3. 仍然保留了 SWR 的其他特性如焦点重新验证等

最佳实践建议

对于 Next.js 13+ 应用路由中的 SWR 使用，推荐以下模式：

1. 在服务端组件中获取初始数据
2. 通过 props 或状态管理将数据传递给客户端组件
3. 客户端组件中同时设置 fallback 和 revalidateOnMount: false
4. 对于需要更新的场景，使用 mutate 手动触发重新验证

这种模式既利用了应用路由的服务端数据获取优势，又保持了 SWR 的客户端状态管理能力，实现了最佳的性能和用户体验平衡。