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


関連記事

Vuexの機能と使い方

1 はじめに2 Vuexとは2.1 Single Source of Truth2.2 状態の取得、更新のカプセル化2.3 単方向データフロー3 Vuexのストア3.1 ステート3.2 ゲッター3.3 ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

docker-syncでファイルの同期を高速化する

1 はじめに2 docker-syncの導入3 設定ファイルの作成3.1 docker-composer.yml3.2 docker-compose-dev.yml3.3 docker-sync.ym ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

Next.jsでJSON-LDを実装する

1 はじめに2 リッチリザルトとは3 構造化データとは4 Next.jsでJSON-LDを実装4.1 JSON-LDデータの作成4.2 JSON-LDデータの埋め込み5 リッチリザルトテスト6 さいご ...

フォロー

blog-page_side_responsive

2024年5月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

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