【Next.js】React Hooksライブラリ「Vercel/SWR」でdata fetchしてみた

はじめに

こんにちは、がんがんです。皆さんはSWRというライブラリをご存知ですか?
Next.jsを作っているVercel社(旧Zeit)が作られているライブラリです。


SWRの特徴はfetchしたデータのキャッシュを行えることです。
今回は実際に使ってみて備忘録としてまとめていきます。

公式ドキュメント

swr.vercel.app

github.com

インストール

$  yarn add swr
#  npmの場合
$  npm i swr

基本的な使い方

使い方としては、下記の通りです。下記ではQuick StartExamples/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について実験してみました。ページネーションの実験については後ほど備忘録にまとめます。