Next.js:在getStaticProps中使用“重新验证”选项和使用SWR包有什么区别？

Question

Next.js有以下“重新验证”选项：

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

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

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

上面的代码将确保从我们请求更新数据的那一刻起60秒后重新生成页面(第一次刷新来请求新数据，第二次刷新到更新页面)。这是基于增量静态再生，所以网站不需要重建。

来自SWR文档：

如果您的页面包含频繁更新的数据，并且不需要预呈现数据，那么SWR是一个非常合适的方法，不需要特殊的设置:只需导入useSWR并在任何使用数据的组件中使用钩子即可。

那么，这是否意味着在本例中，useSWR与next.js“重新验证”选项基本相同？它似乎在做同样的事情，但是重新验证发生的频率是多少次呢？用一种比另一种有什么好处？

Answer 1

不，它们不一样，适合不同的用例。

useSWR是一个数据获取钩子，它提供缓存和自动再验证机制(您可以控制这些机制)，以在客户端保持数据新鲜。数据重新验证将发生在客户端上，并且只会使单个用户受益。

使用revalidate和增量静态再生可以在服务器端重新生成静态页面。整个页面将在服务器上再次生成，并被静态缓存。任何后续请求(来自任何用户)都将被送达重新生成的页面。

使用一种或另一种完全取决于您的需求，它们并不是相互排斥的--您可以同时使用这两种需求。