一個簡短的SWR教程

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

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

npm install swr

並且你需要定義一個fetcher函數,我通常在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返回的對象還包含isLoadingisErrorisLoading對於顯示一些類似“加載中…”的視覺提示非常有用。

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

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