FrontEnd

SWRを使ってみた①

投稿日:

はじめに

最近、React用ライブラリのSWRを触る機会があったので備忘録的に内容について書きたいと思います。

概要

Next.jsを作成しているVercel製のデータフェッチ用ライブラリ。
APIでのデータ取得、キャッシュ管理、状態管理など一通り行なってくれます。

公式に

“SWR” という名前は、 HTTP RFC 5861(opens in a new tab) で提唱された HTTP キャッシュ無効化戦略である stale-while-revalidate に由来しています。 SWR は、まずキャッシュからデータを返し(stale)、次にフェッチリクエストを送り(revalidate)、最後に最新のデータを持ってくるという戦略です。

とあるように、
・APIで取得したデータをキャッシュする
・次回同じAPIにアクセスする際にはキャッシュを返す
・バックグラウンドでデータの更新があるかを検証し、更新があれば自動でキャッシュの更新を行う
・結果として無駄なAPIアクセスを行わず高パフォーマンスな挙動を簡単に実現出来る
の様な特徴があります。

使い方

基本的な使い方を見てみましょう

引数はそれぞれ

・第1引数:このリクエストのためのユニークなキー文字列。このキーを元に取得結果がキャッシュされるようです。通常はAPIのエンドポイントみたいです。

・第2引数:データをフェッチするための Promise を返す関数。今回はAxiosを使用しています。fetchでも良いみたいです。

となっていて、返却値の data にデータ取得前やエラー時は undefined が入り、データ取得後のタイミングでfetch関数の戻り値が入ります。
そのため、 data の値をif条件に表示/非表示を切り替える事も可能です。

主な特徴

useSWRには公式にある通り様々な特徴がありますが、特に重要だと思うのは以下3点です。

自動再検証

データ取得後はキャッシュされた値が返却されますが、キャッシュされた値の再検証を自動で行う事が出来ます。

APIを再フェッチして結果に差分があればキャッシュが自動で即更新されます。

この更新方法はいくつか種類があり、それぞれ第3引数のoptionの中で設定する事が出来ます。

逆に自動再検証が不要な場合は、以下のフックを使えます。

重複排除

同じフェッチ内容であれば、複数箇所で使用しても実際にリクエストされるのは1回のみとなる
例えば、以下の様にuseSWRを内包したコンポーネントを複数使用してもリクエスト1回のみです。

ステート管理

useSWRは、 dataerror の他に、 isLoadingisValidating の値を返却します。
各値はAPI通信状況によって更新されるので、各ステート管理に非常に便利です。

1点注意点があり、上記の様に4つの値が更新される状況だと、コンポーネントが4回レンダリングされる事になるようなので
必要な値のみ使用して不要なレンダリング回数が増えない様にした方が良いみたいです

さいごに

APIでのデータ取得周りを一通りカバーしてくれるのは有り難いですね。次回はuseSWRで無限スクロールの実装をしてみたいと思います。

おすすめ書籍

実践Next.js —— App Routerで進化するWebアプリ開発 エンジニア選書 TypeScriptとReact/Next.jsでつくる実践Webアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

Vue.jsのコードをTypeScriptで書く

1 はじめに2 TypeScriptでの書き方2.1 定義2.2 data2.3 methods2.4 computed2.5 props2.6 emit2.7 lifecycle hooks2.8 ...

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

ざっとPWAの概要を調べてみる

1 はじめに2 ProgressiveWebAppsとは3 PWAに必要な技術4 PWAとセットでよく出てくる「AMP」とは5 ネイティブアプリ vs PWA6 さいごに はじめに ここ最近、Andr ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

フォロー

blog-page_side_responsive

2024年5月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。