/

如何使用SWR

如何使用SWR

一個簡短的SWR教程

在Next.js應用程式中，使用SWR是進行GET請求的最佳方法之一。

你可以通過以下命令來安裝它：

1
npm install swr

並且你需要定義一個fetcher函數，我通常在lib/fetcher.js文件中使用同樣的方式：

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

在組件的文件頂部引入它：

1
import fetcher from 'lib/fetcher'

然後你就可以開始使用它了。

在組件的頂部引入useSWR：

1
import useSWR from 'swr'

然後在組件內部的頂部，我們使用useSWR來加載我們需要的數據：

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

除了data屬性外，從useSWR返回的對象還包含isLoading和isError。isLoading對於顯示一些類似“加載中…”的視覺提示非常有用。

你可以向useSWR傳遞一個附加對象，其中包含一些選項。例如，我使用這個選項來限制SWR重新驗證的次數，這樣當我在開發模式下時，就不會重複連接到終點：

1
2
3
4
5
6
7
const { data } = useSWR(`/api/data`, fetcher, {
 revalidateOnFocus: false,
 revalidateOnReconnect: false,
 refreshWhenOffline: false,
 refreshWhenHidden: false,
 refreshInterval: 0
})

tags: [“Next.js”, “SWR”, “GET请求”, “数据加载”]