SWR项目中useSWRInfinite分页请求的优化实践

分页请求中的重复调用问题

在使用SWR库的useSWRInfinite进行分页数据加载时，开发者可能会遇到一个常见问题：当调用setSize方法加载下一页数据时，发现fetcher函数被意外地多次调用。具体表现为初始渲染时调用一次，而点击"加载更多"按钮后，预期只增加一次调用，但实际上却触发了两次请求。

问题根源分析

经过深入研究发现，这种现象并非bug，而是SWR的默认行为设计。关键在于revalidateFirstPage这个配置项默认被设置为true。当这个选项启用时，SWR会在每次分页请求时不仅获取新页面的数据，还会重新验证第一页的数据。

这种设计有其合理性：

1. 确保第一页数据始终保持最新状态
2. 防止用户看到过期数据
3. 在数据频繁更新的场景下特别有用

解决方案与优化建议

对于不需要实时更新第一页数据的场景，可以通过显式设置revalidateFirstPage: false来优化性能：

const { data, size, setSize } = useSWRInfinite(
  index => `${key}-page-${index}`,
  fetcher,
  { revalidateFirstPage: false }
);

权衡考虑

需要注意的是，禁用revalidateFirstPage会带来一些影响：

1. 第一页数据将不会自动更新
2. 使用useSWRMutate时第一页不会重新验证
3. refreshInterval对第一页失效

在以下场景建议保持默认值(true)：

• 数据实时性要求高的应用
• 协作编辑系统
• 金融或交易类应用

而在以下场景可以考虑设置为false：

• 静态内容展示
• 性能敏感型应用
• API有严格调用限制的情况

最佳实践

1. 根据业务需求合理配置revalidateFirstPage
2. 在性能与数据新鲜度之间找到平衡点
3. 对于关键数据，即使禁用自动刷新，也应考虑手动触发验证
4. 配合缓存策略实现最优性能

通过理解SWR的这一设计理念，开发者可以更精准地控制数据请求行为，在保证用户体验的同时优化应用性能。