SWRキャッシュの理解

概要

vercel出品のAPI通信ライブラリSWRの利用中に気づいたキャッシュのことをメモする

SWRキャッシュの仕組み

• ReactのContextに保存するグローバル的参照で、キャッシュを共有している
• SWRでAPIアクセスすれば、自動的にキャッシュ機能が利用される

<SWRProvider>{children}</SWRProvider>

export const SWRProvider = ({ children }: Readonly<{ children: React.ReactNode }>) => {
  return (
    <SWRConfig value={{ fetcher: fetch, revalidateOnFocus: false }}>{children}</SWRConfig>
  );
};

キャッシュの動き

• SWRConfigにdedupingInterval設定があり、デフォルト値が2秒
• 2秒以内であれば、API通信せずキャッシュデータを利用
• useSWRフック経由で複数のところから同じapi通信を実行しようとしても、SWR内部のコントロールにより実は１つのapi通信しか発生しない
  • かなり良い機能
  • 色んなコンポーネントから発生するapi通信の重複排除の工数がなくなる
  • RSC（React Server Component）でnext.jsのRequest memoization機能がこれと似てる

dedupingInterval = 2000: この期間内での同じキーのリクエストを重複として排除します

キャッシュあり場合の画面描画

SWR(Stale While Revalidation)の思想によりその場で描画される

• 古いキャッシュデータでその場にすぐ描画される
• 並行でAPI通信が走る
• API通信が終わったら、最新のレスポンスデータで再描画する

古いキャッシュを手動で捨てる

検索条件がSWRのキーに入る場合、細かい検索条件の変更に伴い、キャッシュMapのkeyとvalueがどんどん増えていく。valueにはサイズが大きくて、古いデータがメモリを圧迫するような気がする場合、それをクリアしたくなるかも。

• uswSWRの戻り値のmutateを使ってクリアする

mutate(undefined, false);

参考記事

• SWRキャッシュ