NuxtのuseFetchとは？〜何が嬉しいのか〜

NuxtのuseFetchは、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）の両方に対応したデータ取得用のComposableです。APIからのデータ取得を簡潔に書けるだけでなく、サーバーで取得したデータをクライアントに効率よく引き継ぐため、ページの初期表示が高速化されます。

従来のAPI呼び出しでは、サーバーとクライアントで別々にデータを取得する必要があり、二重フェッチや表示のちらつきが発生しやすい問題がありました。useFetchはこれらの課題を解決し、開発者がシンプルに非同期データを扱えるように設計されています。

まず結論：useFetchのポイント

• SSR対応：サーバーでデータを取得し、クライアントにハイドレーション時に再フェッチさせない
• リアクティブなURL指定：refやcomputedを使い動的にAPIエンドポイントを変更可能
• 自動キャッシュと重複排除：同じキーのリクエストは一度だけ実行し、結果を共有
• 豊富なオプション：クエリパラメータ、ヘッダー設定、リクエストインターセプターなど細かく制御可能
• 手動リフレッシュ：refresh関数で必要に応じてデータを再取得できる
• エラーハンドリングが簡単：errorのrefでエラー状態を管理可能

いつ使うべきか？使わない方がよいケースは？

使うべきケース

• SSR対応のAPIデータ取得が必要なページやコンポーネント
• ページロード時に初期データをサーバーで取得し、クライアントで再利用したい場合
• APIエンドポイントが動的に変わる場合（例：ルートパラメータに応じて）
• 複数コンポーネント間で同じデータを共有したい場合
• APIリクエストに細かい制御（ヘッダー設定やインターセプター）が必要な場合

使わない方がよいケース

• 完全にクライアントサイドでのみ動作する軽量なデータ取得（単純なfetchやaxiosで十分）
• ページの初期表示にデータが不要で、ユーザー操作後にのみ取得する場合（lazyオプションを使うか別手段を検討）
• 非同期処理の制御が複雑で、useFetchの自動管理が合わない場合（カスタムComposableを検討）

実務でよくあるユースケースとサンプルコード

1. ルートパラメータに応じた動的データ取得

import { computed } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const userId = computed(() => route.params.id)

const { data: user, error, refresh } = await useFetch(() => `/api/users/${userId.value}`)

この例では、URLパラメータidが変わるたびに自動でAPIを再フェッチし、最新のユーザーデータを取得します。

2. 認証トークンを付与したAPIリクエスト

const { data, error } = await useFetch('/api/profile', {
  onRequest({ options }) {
    options.headers.set('Authorization', `Bearer ${localStorage.getItem('token')}`)
  }
})

API呼び出し時にヘッダーを動的に設定し、認証が必要なエンドポイントに対応します。

3. 手動でデータをリフレッシュするケース

const { data, refresh, status } = await useFetch('/api/posts')

function reloadPosts() {
  refresh()
}

ユーザーの操作に応じて最新データを取得したい場合にrefreshを呼び出します。

よくある落とし穴・注意点

SSRとCSRのハイドレーションの違いに注意

useFetchはサーバーで取得したデータをNuxtのペイロードに含め、クライアントで再フェッチを防ぎます。しかし、server: falseを指定するとサーバーでの取得がスキップされ、クライアントでのみフェッチされるため、初期表示時にdataがnullのままになることがあります。

リアクティブなURLの扱い

URLをrefやcomputedで渡す場合、URLが変わるたびに自動で再フェッチされます。意図しない頻繁なリクエストを防ぐため、監視対象の値が安定しているか確認しましょう。

重複リクエストの制御

同じキーのリクエストはデフォルトで重複排除されますが、dedupeオプションで挙動を制御可能です。複数コンポーネントで同じデータを共有したい場合は便利ですが、異なるパラメータでのリクエストが混ざらないようキーの指定に注意してください。

パフォーマンスへの影響

大量のuseFetchを同時に使うとリクエストが集中し、パフォーマンス低下やAPI制限にかかる可能性があります。必要に応じてlazyオプションや監視の無効化を検討しましょう。

まとめ

NuxtのuseFetchはSSRに最適化された強力なデータ取得Composableであり、APIからのデータ取得を効率的かつ簡潔に実装できます。リアクティブなURL指定やリクエストインターセプターなど柔軟な機能を備え、実務での多様なユースケースに対応可能です。

ただし、SSRとCSRの挙動の違いや重複リクエストの制御など、理解しておくべきポイントも多いため、この記事で紹介した注意点を踏まえて適切に使いこなしてください。これにより、Nuxtアプリケーションのパフォーマンスとユーザー体験を大きく向上させることができます。