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 to pre-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 the data.

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

Answer 1

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

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

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

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

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

Next.js: what is the difference between using the "revalidate" option in the getStaticProps and using the SWR package?

reactjs

next.js

swr