Nuxt における useAsyncData / useLazyAsyncData / useFetch の違いまとめ

概要

こんにちは、mk0812です。Nuxt 3 では、非同期データ取得のために useAsyncData / useLazyAsyncData / useFetch といった composable が用意されています。それぞれの特徴や用途を正しく理解することで、パフォーマンスやUXを最適化できます。

本記事では、それぞれの違いや使い分けについて、表形式や具体例を交えて解説します。

公式

• useAsyncData: https://nuxt.com/docs/api/composables/use-async-data
• useLazyAsyncData: https://nuxt.com/docs/api/composables/use-lazy-async-data
• useFetch: https://nuxt.com/docs/api/composables/use-fetch

---

用語の説明

• useAsyncData: SSR/CSR問わず、即時にデータ取得を行う composable。
• useLazyAsyncData: クライアントマウント後に手動または条件付きでデータ取得する composable。
• useFetch: useAsyncDataのラッパー。主にHTTPリクエスト用で、簡易的に書ける。

---

比較

項目	useAsyncData	useLazyAsyncData	useFetch
データ取得のタイミング	SSR時 + CSR時（自動）	CSRマウント後、必要になってから	SSR時 + CSR時（自動）
SSR対応	✅ はい	❌ いいえ（クライアントのみ）	✅ はい
初期HTMLへの影響	データが含まれる（SEOに有利）	含まれない（描画は速いがSEOなし）	含まれる（SEOに有利）
トリガー方法	自動で取得	execute() などで手動実行可能	自動で取得
主な用途	初期表示に必要なデータ	遅延取得したい場面	外部APIリクエスト全般
fetchWrapperとの違い	なし	なし	$fetchベースのシンプルな書き方が可能

---

具体例

✅ useAsyncData の使用例

const { data } = await useAsyncData('products', () => fetchProducts())

• 商品一覧ページなど、初期表示に絶対必要なデータ
• SEOを考慮したコンテンツ（例：ブログ詳細ページ）

---

✅ useLazyAsyncData の使用例

const { data, execute } = useLazyAsyncData('user', () => fetchUser(), {
  immediate: false
})

// 必要なときだけ実行
onMounted(() => {
  if (isLoggedIn.value) execute()
})

よくあるユースケース

ケース	説明
🔁 クライアント再取得用途	初回SSRで取得せず、CSRで再取得したい
👤 ログイン後のみ必要なデータ	認証後にだけ取得するデータ（例：マイページ情報）
📦 デフォルト非表示のUI	アコーディオンやタブなど、開かれるまで取得不要なもの
🌐 SEO不要なAPIデータ	管理画面など、クローラーに見せなくてよいデータ

---

✅ useFetch の使用例

const { data, pending, error } = await useFetch('/api/products')

• useAsyncDataのように扱えるが、HTTP用途に特化しており、$fetchに慣れているなら使いやすい
• 簡易的なAPI呼び出しに向いている

---

フローチャート

【データ取得の目的は？】
            ↓
  初期表示時に必要？
     ↓            ↓
   はい           いいえ
   ↓               ↓
useAsyncData   SSRは不要？
                   ↓
             はい        いいえ
              ↓           ↓
    useLazyAsyncData   useAsyncData

---

まとめ

• SEOが必要な初期データ → useAsyncData or useFetch
• パフォーマンス最優先で遅延取得 → useLazyAsyncData
• HTTP通信に特化し簡潔に書きたい → useFetch

それぞれの composable は一長一短があり、使い分けの鍵は「いつ・どのようにデータが必要か」です。アプリケーションの要件に応じて、適切な選択をしましょう。