【Next.js】React Hooksライブラリ「Vercel/SWR」でdata fetchしてみた
はじめに
こんにちは、がんがんです。皆さんはSWRというライブラリをご存知ですか?
Next.jsを作っているVercel社(旧Zeit)が作られているライブラリです。
SWRの特徴はfetchしたデータのキャッシュを行えることです。
今回は実際に使ってみて備忘録としてまとめていきます。
インストール
$ yarn add swr # npmの場合 $ npm i swr
基本的な使い方
使い方としては、下記の通りです。下記ではQuick StartとExamples/basic usageをミックスしています。
import useSWR from 'swr'; const fetcher = (...args) => fetch(...args).then(res => res.json()); export default function App() { const { data, error } = useSWR( "https://api.github.com/repos/vercel/swr", fetcher ); if (error) return <div>failed to load</div> if(!data) return <div>Loading...</div> return ( <div> <h1>{data.name}</h1> <h1>{data.name}</h1> <p>{data.description}</p> <strong>👀 {data.subscribers_count}</strong>{" "} <strong>✨ {data.stargazers_count}</strong>{" "} <strong>🍴 {data.forks_count}</strong> </div> ); }
useSWRと書かれているように使用した感覚はReact Hooksでした。
Hooksのような形で使えるのは非常に便利ですね。
使ってみた感想として
データの更新タイミングとしてuseSWRがなかった場合はuseEffectを使っていく方法があるみたいですね。
ただ、非常にコード量が増えるのでやっぱりuseSWRを使う方が楽ですね。
panda-program.com
また、キャッシュしてくれるのも非常に便利ですね。
ページネーション時のローディングも1回しか行われないので表示がコロコロ変わることがなくてユーザ的にもいいですね。
ページネーションの話は改めて備忘録にまとめます。
おわりに
今回はVercelが作っているSWRについて実験してみました。ページネーションの実験については後ほど備忘録にまとめます。