Next.js中getStaticProps的revalidate选项与SWR包的区别是什么？

Next.js revalidate 基本用法 #

Next.js 内置了revalidate选项，用法示例如下：

export async function getStaticProps(context) {
  const data = await getData();

  if (!data) {
    return {
      notFound: true,
    };
  }

  return {
    props: { data },
    revalidate: 60,
  }
}

上述代码可保证页面在请求更新数据后的60秒后被重新生成（第一次刷新触发新数据请求，第二次刷新即可更新页面内容）。该能力基于增量静态再生实现，无需重新构建整个站点。

SWR 特性说明 #

SWR 官方文档的说明如下：

如果你的页面包含频繁更新的数据，且你不需要预渲染数据，SWR是非常合适的选择，无需特殊配置：仅需导入useSWR，在任意使用该数据的组件中调用该hook即可。

常见疑问解答 #

1. useSWR和Next.js的revalidate选项本质作用是否一致？ #

二者本质完全不同，运行逻辑和适用场景有明显差异，并不是同一种能力。revalidate是服务端页面静态生成的控制能力，而SWR是前端侧的数据请求缓存管理工具。

2. 二者的重新校验频率分别是怎样的？ #

• Next.js revalidate：校验频率由你设置的固定时间阈值决定，比如示例中设置为60，就代表60秒内所有请求都返回已生成的旧静态页面，超过60秒后的第一个请求会触发后台重新生成页面，之后的请求才能拿到更新后的内容。校验触发和页面请求绑定，全程在服务端运行，没有用户请求就不会触发校验。
• SWR：校验规则可自由配置，除了支持自定义固定轮询间隔外，还支持组件挂载、窗口聚焦、网络恢复等多种时机自动触发校验，所有校验逻辑都在用户浏览器端运行，校验完成后会直接更新当前页面的UI，用户不需要刷新页面就能看到最新内容。

3. 二者分别有什么优势？ #

• revalidate（增量静态再生）优势：
  • 支持页面预渲染，SEO友好，爬虫可以直接抓取到完整的页面内容
  • 静态化的页面响应速度极快，服务端运行压力很小
  • 数据更新逻辑全部在服务端处理，前端不需要额外开发，用户侧无感知
  • 适合内容更新频率适中、需要SEO的公开页面，比如资讯内容页、商品详情页等场景
• SWR优势：
  • 数据更新实时性更高，更新后无需刷新页面即可展示，用户体验更好
  • 校验颗粒度更细，可以针对单个接口、单个组件独立配置数据更新规则，不需要关联整个页面的生成逻辑
  • 自带请求去重、缓存共享、错误重试、加载状态处理等能力，能大幅减少前端重复的请求逻辑开发量
  • 适合数据更新频繁、对SEO要求不高的交互类页面，比如后台管理仪表盘、实时消息列表、用户个人中心等场景

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