SWR
#React_Hooks #React
概要
“SWR” という名前は、 HTTP RFC 5861 (opens in a new tab) で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に最新のデータを持ってくるという戦略です。
SWRは「データフェッチ結果を管理するための状態管理」
インタラクティブなUIを実装するための状態管理
コンポーネント内に閉じた状態(ローカルステート)を管理するための状態管理→useState
グローバルなスコープの状態(グローバルステート)を管理するための状態管理→useCotext / Redux / Recoil
データフェッチ結果を管理するための状態管理
SWRは自分で書き込むこともできるのでグローバルな状態管理のためのkev-valueストアとしても使えなくはない
概念
Stale-While-Revalidate(古いデータを表示しつつ再検証)
キャッシュされたデータをまず返し(古いデータ)、バックグラウンドで最新のデータをフェッチします(再検証)。これにより、UIはキャッシュされたデータですぐに更新され、同時にデータは最新の状態に保たれます。
キャッシュ
SWRはキーを使ってデータをキャッシュする
このキーは、フェッチされるデータを一意に識別する文字列です。キャッシュされたデータはコンポーネント間で共有され、コンポーネントがアンマウントされても再度マウントされた際にアクセスできます。
再検証
SWRはウィンドウがフォーカスされた時やネットワークが再接続された時、または一定のポーリング間隔で自動的にデータを再検証します