データフェッチングのパターンをClaudeと選ぶ

まずClaudeにプロジェクトの状況を整理してもらう

データフェッチングのライブラリ選定は、プロジェクトの要件によって最適解が変わります。Claude Codeを使えば、自分のプロジェクトに合ったパターンを素早く選択・実装できます。

まずは現在の構成をClaudeに伝えてみましょう。次のようにプロンプトを入力するだけで、具体的な比較が得られます。

Next.js 14のApp Routerを使っています。
ユーザー一覧ページはSSR、ダッシュボードはリアルタイム更新が必要です。
SWR・React Query・Server Componentsのどれが適していますか？
要件ごとに比較表を出してください。

Claudeはキャッシュ戦略・バンドルサイズ・学習コストといった観点から整理した比較表を返してくれます。抽象的なドキュメントを読み漁る時間を大幅に削減できます。

※キャッシュ: 一度取得したデータを一時的に保存しておき、同じリクエストへの応答を速くする仕組み。※プロンプト: AIへの指示文。Claude Codeへの指示の質がそのまま出力の質に影響する。※バンドル: 複数のJavaScript・CSSファイルをひとつにまとめてブラウザへの転送を最適化すること。※SSR: Server-Side Rendering の略。HTMLをサーバー側で生成してブラウザに送る方式。SEOや初期表示速度に優れる。

Server Componentsでのデータ取得をそのまま実装してもらう

方針が決まったら、実装もClaudeに任せましょう。たとえばApp RouterのServer Componentsパターンなら、次のように依頼します。

Next.js 14のServer ComponentsでREST APIからユーザー一覧を取得するコードを書いてください。
エラーハンドリングとローディング状態（loading.tsx）も含めてください。

すると以下のようなコードが生成されます。

export default async function UsersPage() {
  const res = await fetch("https://api.example.com/users", {
    next: { revalidate: 60 }, // 60秒ごとに再検証
  });

  if (!res.ok) throw new Error("ユーザーの取得に失敗しました");

  const users: User[] = await res.json();

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

revalidateオプションの数値も要件に応じてClaudeが提案してくれるため、キャッシュ設計の迷いがなくなります。

※REST API: Representational State Transfer の設計原則に基づくAPI。URLとHTTPメソッド（GET/POST/PUT/DELETE）でリソースを操作する。※API: Application Programming Interface の略。外部サービスとプログラム間でデータをやりとりするための接続口。

SWRへの切り替えも差分で依頼する

クライアントサイドでリアルタイム更新が必要な箇所はSWRが適しています。既存コードをベースに切り替えたい場合は、こう依頼しましょう。

上記のUsersPageをSWRを使ったクライアントコンポーネントに書き直してください。
ポーリングは30秒ごとに設定してください。

ClaudeはuseSWRフックを使った実装に変換しつつ、refreshIntervalの設定まで含めたコードを返します。比較実装を並べてコードレビューの材料にすることもできます。ライブラリ選定から実装・リファクタリングまで、一連の作業をClaude Codeで一気に進めてみてください。

※リファクタリング: 外部から見た動作を変えずに、コードの内部構造を整理・改善すること。