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

Question

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

\n

export async function getStaticProps(context) {\n  const data = await getData();\n\n  if (!data) {\n    return {\n      notFound: true,\n    };\n  }\n\n  return {\n    props: { data },\n    revalidate: 60,\n  }\n}\n

\n

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

\n

来自SWR文档：

\n

\n

如果您的页面包含频繁更新的数据，并且您不需要\xe2\x80\x99\n预渲染数据，SWR 非常适合，无需特殊设置：\n只需导入 useSWR 并在任何使用该钩子的组件中使用该钩子即可\n数据。

\n

\n

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

\n

Answer 1

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

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

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

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