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アプリケーション開発

page_footer_responsive




-FrontEnd
-,

執筆者:

免責事項

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


comment

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

CAPTCHA


関連記事

JQueryとmark.jsでマークダウンのリアルタイムプレビューをつくる

1 はじめに1.1 環境2 mark.js2.1 公式ドキュメント2.2 インストール2.3 実際に使用してみる2.4 オプションについて3 プレビュー機能3.1 vue.jsに関して3.2 JQue ...

React Router v7のSSRでパスルーティングな i18n をやってみた

1 はじめに2 remix-i18nextの導入2.1 インストール2.2 セットアップ2.3 entry.server.tsxの実装2.4 entry.client.tsxの実装3 i18n対応3. ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

Nuxt 3(ベータ)の新機能を紹介

1 はじめに2 Nuxt 3の特徴2.1 新しいサーバエンジン(Nitro Engine)が登場2.2 Vue 3&Composition APIのネイティブサポート2.3 TypeScriptのネイ ...

フォロー

blog-page_side_responsive

2024年5月
 1234
567891011
12131415161718
19202122232425
262728293031  

アプリ情報

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