如何使用SWR
一個簡短的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 })