一個簡短的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
返回的對象還包含isLoading
和isError
。isLoading
對於顯示一些類似“加載中…”的視覺提示非常有用。
你可以向useSWR
傳遞一個附加對象,其中包含一些選項。例如,我使用這個選項來限制SWR重新驗證的次數,這樣當我在開發模式下時,就不會重複連接到終點:
const { data } = useSWR(`/api/data`, fetcher, {
revalidateOnFocus: false,
revalidateOnReconnect: false,
refreshWhenOffline: false,
refreshWhenHidden: false,
refreshInterval: 0
})