Next.jsでuseSWRのdedupingIntervalオプションの動作確認

2021.07.19

環境構築

Next.jsのアプリを作成。

% npx create-next-app
✔ What is your project named? … nextjs-useswr-dedupe-sample
Creating a new Next.js app in /Users/same/apps/nextjs-useswr-dedupe-sample.
#...
% cd nextjs-useswr-dedupe-sample

useSWRをインストール。

% yarn add swr

アプリを起動。

% yarn dev

検証用のUIを追加

/と/aboutの2つの同内容のページを用意して、リンクで接続する。

import Link from 'next/link'
import useWeatherForecastRepository from '../repositories/useWeatherForecastRepository'
import AppHeader from '../components/AppHeader'

export default function Home() {
  const { data, isLoading, isError } = useWeatherForecastRepository()
  return (
    <div>
      <div>
        <Link href="/">
          <a>home</a>
        </Link>
        <Link href="/about">
          <a>about</a>
        </Link>
      </div>
      {isLoading ? (
        <div>Loading...</div>
      ) : isError ? (
        <div>Error!</div>
      ) : (
        <div>
          {JSON.stringify(data)}
        </div>
      )}
    </div>
  )
}

カスタムフックを用意して両方のコンポーネントで呼ぶ。

dedupingIntervalオプションを設定

通常はコンポーネントのマウント時や、タブに再フォーカスしたときなど、リソースを常に再取得する。このとき、再取得したデータが評価されるまでのギャップをキャッシュで埋めることができる。

今回は、変更の少ないリソースに対してキャッシュを効かせるイメージで、dedupingIntervalを設定してみる。

import useSWR from 'swr'

function useWeatherForecastRepository() {
  const { data, error } = useSWR('https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json', {
    dedupingInterval: 10000,
  })

  return {
    data: data,
    isLoading: !data && !error,
    isError: error,
  }
}

export default useWeatherForecastRepository

期待通り、10秒はキャッシュが効いていて、それ以降は再取得が走る。リソースの更新頻度に応じてキャッシュの寿命を設定できそう。

データは気象庁のサイトのものを使わせていただいた。