如何使用SWR

在Next.js应用程序中，进行GET请求的最佳方式之一是使用SWR。

你可以通过以下方式安装它

npm install swr

并且你必须定义一个_获取器函数_，我总是在lib/fetcher.js 文件中使用相同的函数。

const fetcher = (...args) => fetch(...args).then((res) => res.json())
export default fetcher

你在你的组件文件的顶部导入它。

import fetcher from 'lib/fetcher'

然后你就可以开始使用它了。

在一个组件的顶部，导入useSWR 。

import useSWR from 'swr'

然后在组件内部，在顶部，我们调用useSWR ，加载我们需要的数据。

const { data } = useSWR(`/api/data`, fetcher)

除了data 属性外，从useSWR 返回的对象包含isLoading 和isError 。isLoading 对于显示某种 "加载中... "的视觉指示特别有用。

你可以通过一些选项向useSWR 传递一个额外的对象，例如我用它来限制SWR的重新验证次数，这样我在开发模式下就不会得到重复连接到终端的机会。

const { data } = useSWR(`/api/data`, fetcher, {
  revalidateOnFocus: false,
  revalidateOnReconnect: false,
  refreshWhenOffline: false,
  refreshWhenHidden: false,
  refreshInterval: 0
})