SWR vs TanStack Query徹底比較 2025 - Reactデータフェッチライブラリの選び方

2025 年の Reactアプリケーション開発において、効率的なデータフェッチングとキャッシュ管理は不可欠です。SWRとTanStack Query（旧 React Query）は、この分野をリードする 2 つのライブラリです。本記事では、両者の特徴を徹底比較し、プロジェクトに最適な選択を支援します。

データフェッチングライブラリの必要性

SWR vs TanStack Query：基本比較

コア哲学の違い

SWR: シンプルさと使いやすさ

SWR は”stale-while-revalidate”戦略に基づき、シンプルで直感的な API を提供します。

import useSWR from 'swr';

function Profile() {
  const { data, error, isLoading } = useSWR('/api/user', fetcher);
  
  if (error) return <div>エラーが発生しました</div>;
  if (isLoading) return <div>読み込み中...</div>;
  return <div>こんにちは、{data.name}さん！</div>;
}

TanStack Query: 高機能と柔軟性

TanStack Query は、より包括的なソリューションを提供し、複雑なユースケースに対応します。

import { useQuery } from '@tanstack/react-query';

function Profile() {
  const { data, error, isLoading } = useQuery({
    queryKey: ['user'],
    queryFn: fetchUser,
    staleTime: 5 * 60 * 1000, // 5分
    gcTime: 10 * 60 * 1000, // 10分（旧cacheTime）
  });
  
  if (error) return <div>エラー: {error.message}</div>;
  if (isLoading) return <div>読み込み中...</div>;
  return <div>こんにちは、{data.name}さん！</div>;
}

機能比較

基本的なデータフェッチング

パフォーマンス最適化機能

高度な機能比較

1. ミューテーション（データ更新）

// SWRのミューテーション
import useSWRMutation from 'swr/mutation';

function UpdateProfile() {
  const { trigger, isMutating } = useSWRMutation(
    '/api/user',
    async (url, { arg }) => {
      const res = await fetch(url, {
        method: 'PUT',
        body: JSON.stringify(arg)
      });
      return res.json();
    }
  );
  
  const handleUpdate = async (data) => {
    try {
      await trigger(data);
      // 成功時の処理
    } catch (e) {
      // エラー処理
    }
  };
  
  return (
    <button onClick={() => handleUpdate({ name: '新しい名前' })}>
      更新 {isMutating && '中...'}
    </button>
  );
}

// TanStack Queryのミューテーション
import { useMutation, useQueryClient } from '@tanstack/react-query';

function UpdateProfile() {
  const queryClient = useQueryClient();
  
  const mutation = useMutation({
    mutationFn: (data) => {
      return fetch('/api/user', {
        method: 'PUT',
        body: JSON.stringify(data)
      }).then(r => r.json());
    },
    onSuccess: (data) => {
      // キャッシュの更新
      queryClient.setQueryData(['user'], data);
      // または再フェッチ
      queryClient.invalidateQueries({ queryKey: ['user'] });
    },
    onError: (error) => {
      console.error('更新エラー:', error);
    }
  });
  
  return (
    <button onClick={() => mutation.mutate({ name: '新しい名前' })}>
      更新 {mutation.isPending && '中...'}
    </button>
  );
}

2. 無限スクロール・ページネーション

3. リアルタイム更新

// SWRでのリアルタイム更新
function LiveData() {
  const { data, mutate } = useSWR('/api/live-data', fetcher, {
    refreshInterval: 1000, // 1秒ごとにポーリング
  });
  
  // WebSocketとの統合
  useEffect(() => {
    const ws = new WebSocket('wss://api.example.com/live');
    
    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      mutate(newData, false); // キャッシュを更新（再検証なし）
    };
    
    return () => ws.close();
  }, [mutate]);
  
  return <div>{data?.value}</div>;
}

// TanStack Queryでのリアルタイム更新
function LiveData() {
  const queryClient = useQueryClient();
  const { data } = useQuery({
    queryKey: ['live-data'],
    queryFn: fetchLiveData,
    refetchInterval: 1000, // 1秒ごとにポーリング
  });
  
  // WebSocketとの統合
  useEffect(() => {
    const ws = new WebSocket('wss://api.example.com/live');
    
    ws.onmessage = (event) => {
      const newData = JSON.parse(event.data);
      queryClient.setQueryData(['live-data'], newData);
    };
    
    return () => ws.close();
  }, [queryClient]);
  
  return <div>{data?.value}</div>;
}

エコシステムと統合

フレームワークサポート

DevToolsとデバッグ

TanStack Query DevTools は、より包括的なデバッグ体験を提供します：

// TanStack Query DevToolsの設定
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <YourApp />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  );
}

パフォーマンス最適化

バンドルサイズの最適化

// SWR - 必要な機能のみインポート
import useSWR from 'swr';
import useSWRMutation from 'swr/mutation';
import useSWRInfinite from 'swr/infinite';

// TanStack Query - モジュラーインポート
import { useQuery } from '@tanstack/react-query';
import { useMutation } from '@tanstack/react-query';
import { useInfiniteQuery } from '@tanstack/react-query';

キャッシュ戦略の最適化

// SWRのキャッシュ戦略
const { data } = useSWR(key, fetcher, {
  // キャッシュの設定
  dedupingInterval: 2000, // 2秒間は重複リクエストを防ぐ
  focusThrottleInterval: 5000, // フォーカス時の再検証を5秒に1回に制限
  
  // 再検証の設定
  revalidateIfStale: true,
  revalidateOnMount: true,
  revalidateOnFocus: true,
  revalidateOnReconnect: true,
  
  // エラーハンドリング
  shouldRetryOnError: true,
  errorRetryInterval: 5000,
  errorRetryCount: 3,
  
  // パフォーマンス
  suspense: false,
  keepPreviousData: true,
});

// グローバル設定
import { SWRConfig } from 'swr';

<SWRConfig value={{
  refreshInterval: 3000,
  fetcher: (url) => fetch(url).then(res => res.json()),
  onError: (error, key) => {
    console.error(`SWRエラー ${key}:`, error);
  }
}}>
  <App />
</SWRConfig>

// TanStack Queryのキャッシュ戦略
const { data } = useQuery({
  queryKey: ['todos', filters],
  queryFn: fetchTodos,
  
  // キャッシュの設定
  staleTime: 5 * 60 * 1000, // 5分間は新鮮とみなす
  gcTime: 10 * 60 * 1000, // 10分後にガベージコレクション
  
  // 再フェッチの設定
  refetchOnMount: true,
  refetchOnWindowFocus: true,
  refetchOnReconnect: true,
  refetchInterval: false,
  
  // エラーハンドリング
  retry: 3,
  retryDelay: attemptIndex => Math.min(1000 * 2 ** attemptIndex, 30000),
  
  // パフォーマンス
  structuralSharing: true,
  networkMode: 'offlineFirst',
});

// グローバル設定
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
      retry: 3,
    },
  },
});

プロジェクト別の選択基準

推奨される使用ケース

SWRが最適な場合:

• Next.jsプロジェクト
• シンプルなデータフェッチング要件
• 軽量なバンドルサイズが重要
• 学習コストを最小限にしたい
• Vercelエコシステムを活用

TanStack Queryが最適な場合:

• 複雑なキャッシュ戦略が必要
• 複数のフレームワークで使用
• 高度な DevTools が必要
• オフラインファーストアプリ
• エンタープライズレベルの要件

移行戦略

SWRからTanStack Queryへの移行

// 移行前（SWR）
const { data, error, mutate } = useSWR('/api/user', fetcher);

// 移行後（TanStack Query）
const { data, error, refetch } = useQuery({
  queryKey: ['user'],
  queryFn: () => fetcher('/api/user'),
});

// 移行ヘルパー関数
function useSWRCompat(key, fetcher, options = {}) {
  const query = useQuery({
    queryKey: Array.isArray(key) ? key : [key],
    queryFn: () => fetcher(key),
    refetchInterval: options.refreshInterval,
    enabled: key !== null,
  });
  
  return {
    data: query.data,
    error: query.error,
    isLoading: query.isLoading,
    mutate: query.refetch,
  };
}

TanStack Query は単なるデータフェッチングライブラリではありません。 非同期状態管理の完全なソリューションです。

まとめ

SWR と TanStack Query は、どちらも優れたデータフェッチングライブラリです。選択の際は以下を考慮してください：

最終的に、両ライブラリとも本番環境で実績があり、活発にメンテナンスされています。プロジェクトの要件に最も適したものを選択することが成功への鍵となります。