useSWRとは？リアルタイムデータ取得を効率化するReactフック

システム開発

Reactアプリでデータ取得を最適化したいと考えていませんか？useSWRは、Next.jsの開発元であるVercelが提供するデータフェッチングライブラリ「SWR」のカスタムフックで、データのキャッシュや自動再検証、フォールバック機能などを活用し、リアルタイムでのデータ取得を効率化できます。本記事では、useSWRの基本から実践的な活用方法まで詳しく解説します。

useSWRとは？リアクティブなデータフェッチングを実現するライブラリ

useSWRは、Reactアプリでのデータ取得を効率化するために設計されたカスタムフックです。このフックは、Vercelが開発したSWR（Stale-While-Revalidate）というデータフェッチングライブラリの一部であり、非同期データの管理を簡単にする特徴を持っています。

✅ SWRとは？

SWRは「Stale-While-Revalidate（古いデータを表示しつつ、バックグラウンドで最新データに更新）」という戦略に基づいています。これにより、ユーザーは即座にキャッシュされたデータを確認しつつ、バックグラウンドで最新データに置き換えられるため、スムーズなユーザー体験が可能になります。

✅ 主な特徴

  • キャッシュ機能：取得したデータをキャッシュし、再取得を最小限に抑える
  • 自動再検証：データを最新の状態に保つため、一定のタイミングで再取得
  • フォールバック機能：データ取得に失敗しても、前回のキャッシュデータを活用
  • フォーカス時のリフェッチ：ページがアクティブになったとき、自動的に最新データを取得
  • ポーリング（定期的な更新）：指定した間隔でデータを再取得

このような機能により、SWRはリアルタイム性が求められるアプリケーション（例：ダッシュボード、チャット、通知システム）に特に適しています。

useSWRの基本的な使い方

useSWRを利用すると、簡潔なコードでデータ取得を行うことができます。まずは、ライブラリをインストールしましょう。

npm install swr
# または
yarn add swr

次に、基本的なデータ取得の例を見てみましょう。

import useSWR from 'swr';

const fetcher = (url: string) => fetch(url).then(res => res.json());

export default function UserProfile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error loading data</div>;

  return <div>Username: {data.name}</div>;
}

✅ コードのポイント

  • fetcher 関数を作成し、fetch を使用してAPIからデータを取得
  • useSWR の第一引数にAPIのエンドポイント、第二引数に fetcher を渡す
  • data（取得データ）、error（エラー情報）、isLoading（ローディング状態）を利用してUIを制御

✅ キャッシュの活用

useSWR はデフォルトで取得したデータをキャッシュします。そのため、一度取得したデータは、同じキー（URL）を指定すれば他のコンポーネントでも再利用されます。

このシンプルな仕組みにより、Reactアプリでのデータ取得がより簡潔に、効率的に行えるようになります。

useSWRの応用：データの自動更新とポーリング

リアルタイム性が求められるアプリでは、データの自動更新や定期的なポーリングが重要になります。useSWRはこれらの機能を簡単に実装できるため、動的なデータの管理が効率化されます。

✅ フォーカス時のリフェッチ（自動更新）

ページがアクティブになった際にデータを最新の状態に保つには、revalidateOnFocus を有効にします。

const { data } = useSWR('/api/user', fetcher, { revalidateOnFocus: true });

ポイント

  • ユーザーが別のタブから戻ってきたときに最新データを取得
  • デフォルトで true（明示的に設定しなくても有効）

✅ 一定間隔でデータを更新（ポーリング）

例えば、5秒ごとにデータを更新するには、refreshInterval を指定します。

const { data } = useSWR('/api/user', fetcher, { refreshInterval: 5000 });

ポイント

  • refreshInterval にミリ秒単位の時間を設定することで、定期的にデータをフェッチ
  • 低頻度の更新で済むデータ（例：ダッシュボードの統計データ）に適用するとパフォーマンスの最適化に

✅ フォーカス時 & 一定間隔のリフェッチを組み合わせる

フォーカス時のリフェッチとポーリングを組み合わせることで、リアルタイムデータの信頼性を高められます。

const { data } = useSWR('/api/user', fetcher, {
  revalidateOnFocus: true,
  refreshInterval: 5000
});

活用例

  • ダッシュボード（定期的に最新データを取得）
  • チャットアプリ（新着メッセージを自動取得）
  • 通知システム（未読の通知をリアルタイムで更新）

useSWRのメリット・デメリット

useSWRは、Reactアプリのデータ取得を簡潔にし、パフォーマンスを最適化する便利なライブラリですが、利用する際にはメリットとデメリットの両方を理解しておくことが重要です。

✅ メリット

  • 簡潔なコードでデータフェッチを実装可能useSWRを使うことで、非同期データの取得がシンプルなコードで記述できます。
  • キャッシュの活用でパフォーマンス向上取得したデータはキャッシュされるため、同じデータを再取得する際にネットワークリクエストを減らせます。
  • 自動再検証でデータの最新状態を維持フォーカス時のリフェッチやポーリング機能を活用することで、リアルタイム性の高いアプリを構築できます。
  • Next.jsとの相性が良いuseSWRはVercelが提供するライブラリのため、Next.jsの環境で特に効果的に動作します。

❌ デメリット

  • 複雑な状態管理には別のライブラリが必要useSWRはデータ取得とキャッシュ管理に特化しているため、アプリ全体の状態管理にはReduxやZustandなどのライブラリと併用する必要があります。
  • クライアントサイドレンダリング（CSR）前提のため、SSRとの併用には工夫が必要useSWRはクライアントサイドでデータを取得するため、サーバーサイドレンダリング（SSR）との組み合わせにはfallbackやinitialDataの設定が必要になります。

useSWRの活用例

useSWRは、さまざまなデータ取得のシナリオで活用できます。ここでは、REST APIのデータ取得、GraphQLとの統合、ローカルキャッシュの利用といった具体的な例を紹介します。

✅ 1. REST APIとの連携

SWRは通常のREST APIとの相性が良く、シンプルにデータを取得できます。

const { data, error } = useSWR('/api/posts', fetcher);

if (error) return <div>Failed to load</div>;
if (!data) return <div>Loading...</div>;

return (
  <ul>
    {data.map((post: { id: number; title: string }) => (
      <li key={post.id}>{post.title}</li>
    ))}
  </ul>
);

ポイント

  • fetcher関数でAPIからデータを取得
  • dataがまだない場合は「Loading…」を表示し、エラー時にはエラーメッセージを表示

✅ 2. GraphQLとの統合

GraphQLのクエリを使う場合も、Fetcherをカスタマイズするだけで簡単に実装できます。

const fetcher = (query: string) =>
  fetch('/api/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ query }),
  }).then(res => res.json());

const { data, error } = useSWR('{ posts { id title } }', fetcher);

if (error) return <div>Error fetching data</div>;
if (!data) return <div>Loading...</div>;

return (
  <ul>
    {data.posts.map((post: { id: number; title: string }) => (
      <li key={post.id}>{post.title}</li>
    ))}
  </ul>
);

ポイント

  • GraphQLのクエリを送信するために、POSTリクエストを作成
  • useSWRにクエリを渡し、GraphQLのデータを取得

✅ 3. ローカルキャッシュを活用したデータ管理

SWRのキャッシュ機能を活用すると、頻繁にデータを取得しなくても済みます。例えば、同じデータを複数のコンポーネントで使う場合に有効です。

const { data: user } = useSWR('/api/user', fetcher);

return <div>{user ? `Hello, ${user.name}` : 'Loading...'}</div>;

ポイント

  • /api/user のデータがキャッシュされるため、他のコンポーネントでも同じデータを再利用可能
  • ユーザー情報を取得する場面などで役立つ

まとめ

useSWRは、Reactアプリのデータフェッチを効率化し、リアルタイム性の高いUIを実現する強力なツールです。

本記事のポイント

✅ useSWRはキャッシュ、自動再検証、ポーリングなどの機能を提供

✅ useSWRを使うと、簡潔なコードでデータ取得が可能

✅ refreshIntervalやrevalidateOnFocusを活用すると、最新データを維持できる

✅ REST APIだけでなく、GraphQLやローカルキャッシュの管理にも応用できる

SWRは特にNext.jsやCSR（クライアントサイドレンダリング）のアプリに適しており、リアルタイムデータの取得が必要なダッシュボードやチャットアプリなどで効果を発揮します。

リアルタイムなデータ取得を効率化したい場合は、ぜひuseSWRを活用してみてください！

コメント

タイトルとURLをコピーしました