SWR
stale-while-revalidate
大した量ないし、全部目を通すべしmrsekut.icon
2022/12/9
既にcacheがある場合に送ったreqに対しても即時にそれを使用する
stale~の場合は、cacheを更新するだけでそれが画面に反映されるのは再reloadしたときだけ
いろいろできる
Focus Revalidation
ブラウザをクリックしたり、タブを移動して戻ってきたときにRevalidateする
polling
指定した時間ごとにRevalidate
Local mutation
mutate関数を使ってデータ更新時にキャッシュも更新できる
無限スクロールの場合、ページ遷移後もスクロール位置を保存する
エラー時にリトライしてくれる
タイムアウトの設定が簡単
親と子で独立に同じrequestを呼んでもcacheしてくれる
各Componentが、子のことを考えず自分本位でrequestを投げられる
親と子など、別の場所で同じrequestを呼んだ場合でも、実際に送られるrequestは1回だけになる
難しい点
HTTPのキャッシュヘッダーと組み合わせると、キャッシュが更新されずバグの原因になることがある
Reduxとの協調性はどうか
Recoilとの協調性はどうか
今後のReactの思想にあっているのかどうか
まだ良く知らない状態だけど以下のような印象がある
Redux/Redoilは、clientが賢い
SWR/react-queryは、serverが賢い
VercelがSWRを作っているのもあり、Next.jsとの相性は良いんだろう
一方でRecoilはFacebookが作っているのもあり、今後のReactの思想とも合っているのだろう
と、なったとき、SWRとRecoilの協調性というか、併用しないならどちらを選択すべきか、みたいなところが気になってくる
複雑なアプリなら未だにReduxが良いという意見もあり、混沌を極めている RecoilとSWRをまともに両方触ったことある人がまだ少ない印象がある
この2つの比較の記事をあまり目にしてない
urlをキャッシュのキーにするとバグるケースがありそう
良くないけど例えば、A$ \sub Bが必要な時に、Bを取得するAPIを使うと、同じキーになるので
code:ts
const useGetA = () => {
const B = useSWR(get/B)
return B.A
}
const useGetB = () => {
const B = useSWR(get/B)
return B
}
参考
慣れてきたら再読したい
formを作る