reactjs - Next.js:在 getStaticProps 中使用 "revalidate"选项和使用 SWR 包有什么区别？

Question

Next.js 具有开箱即用的“重新验证”选项:

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

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

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

以上代码将确保从我们请求更新数据的那一刻起 60 秒后重新生成页面(第一次刷新以请求新数据，第二次刷新以更新页面)。这是基于 Incremental Static Regeneration , 因此该站点不需要重建。

来自SWR文档:

If your page contains frequently updating data, and you don’t need topre-render the data, SWR is a perfect fit and no special setup needed:just import useSWR and use the hook inside any components that use thedata.

那么，这是否意味着在这种情况下，useSWR 与 next.js 的“重新验证”选项基本相同？它似乎在做同样的事情，但是重新验证的频率是多少？使用一个比另一个有什么优势吗？

Answer 1

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

useSWR 是一个提供缓存和 automatic revalidation 的数据获取钩子(Hook)在客户端保持数据新鲜的机制(您可以控制)。数据重新验证将在客户端进行，并且只会使该单个用户受益。

使用revalidate 和增量静态重新生成允许您在服务器端 重新生成静态页面。整个页面在服务器上再次生成并静态缓存。任何后续请求(来自任何用户)都将提供重新生成的页面。

使用其中一个完全取决于您的要求，它们并不相互排斥 - 您可以同时使用两者。