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 })