Frontend Academy · レッスン

useFetchとuseAsyncData

useFetchとuseAsyncDataでサーバー側のデータを取得し、保留中とエラーの状態を処理して、Nuxtがクライアントをハイドレーションする仕組みを理解します。

「useFetchとuseAsyncData」はCoddyKit上の無料Frontend Academyレッスンです。これはレッスン2/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

Nuxt 3でのデータ取得

Nuxtには、データ取得用の主なComposableが2つあります。useFetchはURLベースで、内部でfetchを呼び出します。useAsyncDataは任意の非同期関数を使用でき、キャッシュや重複排除のための一意なキーを指定します。

useFetch — 手軽な方法

URLを渡すと、NuxtはSSR中にデータを取得し、クライアントでハイドレーションします。ハイドレーション時にクライアントが再取得することもありません。

<script setup>
const { data: posts, pending, error } = await useFetch('/api/posts');
</script>

<template>
  <div v-if="pending">Loading...</div>
  <div v-else-if="error">{{ error.message }}</div>
  <ul v-else>
    <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

ハイドレーション時に二重取得が起きない理由

Nuxtは取得したデータをSSRのHTMLペイロードにシリアライズします。クライアントでは、useFetchがそのペイロードからハイドレーションするため、2回目のネットワーク呼び出しは発生しません。これがSSR最適化の重要なポイントです。

useAsyncData — 柔軟な非同期処理

データ取得が単純なURLではない場合に使用します。データベースクエリ、独自のロジック、複数ステップのリクエストなどが該当します。

<script setup>
const { data: user } = await useAsyncData('user-profile', async () => {
  const me = await $fetch('/api/me');
  const stats = await $fetch(`/api/users/${me.id}/stats`);
  return { ...me, stats };
});
</script>

キャッシュキーの重要性

useAsyncDataの最初の引数は、一意なキャッシュキーです。コンポーネント間で同じキーを共有すると、重複した取得が排除され、結果が再利用されます。キーが異なる場合は、独立した取得になります。

// Two components calling useFetch('/api/posts') share one request
// Two components calling useFetch('/api/posts', { key: 'a' }) and { key: 'b' } fetch twice

更新と遅延読み込み

どちらのComposableも再取得用のrefresh()を返し、{ lazy: true }を受け取ってSSRのブロックを回避できます。データはページのレンダリング後に読み込まれます。

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

async function onSave() {
  await $fetch('/api/posts', { method: 'POST', body: newPost });
  await refresh();
}

// Or lazy mode:
const { data, pending } = useFetch('/api/posts', { lazy: true });

監視とリアクティブなURL

URLに関数を渡すと、リアクティブになります。依存関係が変わると再取得されます。

<script setup>
const page = ref(1);
const { data } = await useFetch(() => `/api/posts?page=${page.value}`);
// Changing page.value re-runs the fetch
</script>

リクエストオプション

useFetchはfetchと同じオプション（method、body、headers）に加えて、defaultやtransformなどNuxt固有のオプションも受け取ります。

const { data } = await useFetch('/api/posts', {
  method: 'POST',
  body: { title: 'Hello' },
  headers: { 'X-Custom': '1' },
  transform: (raw) => raw.items.map(transformItem),
  default: () => []
});

$fetch — 命令型のFetch

$fetchはNuxtのユニバーサルなfetcherです（内部ではofetchを使用します）。ハイドレーションの自動追跡は行いません。イベントハンドラーやミューテーションで使用します。

async function deletePost(id) {
  await $fetch(`/api/posts/${id}`, { method: 'DELETE' });
  await refresh();
}

エラー処理

fetchハンドラー内でエラーをスローすると、エラーを表面化できます。ページでは~/error.vueを使ってカスタムエラーページを表示できます。

// error.vue at project root
<script setup>
const props = defineProps<{ error: any }>();
</script>

<template>
  <div>
    <h1>{{ error.statusCode }}</h1>
    <p>{{ error.message }}</p>
    <button @click="clearError({ redirect: '/' })">Home</button>
  </div>
</template>

認証とCookie

useFetchはSSR中にCookieを自動的に転送するため、Cookieを手動で処理しなくても、認証が必要なリクエストをサーバーとクライアントの両方で動作させられます。

useFetchとuseAsyncData — 使い分け

useFetch：単純なURLベースのリクエスト（95%のケース）。useAsyncData：独自の非同期ロジック、複数ステップの組み合わせ、URL以外のデータソース（server/utils経由のデータベースなど）。

クイックチェック

Nuxt 3のuseFetchは、ページがクライアントでハイドレーションされるときに、重複したネットワークリクエストをなぜ防げるのですか？

振り返り：useFetchとuseAsyncData

useFetch: URLベースで、95%のケースに対応します。useAsyncData: 独自の非同期ロジックと一意のキャッシュキーを使用します。どちらもSSRペイロードからハイドレーションされるため、リクエストが二重に発生しません。refresh()で再取得し、lazy:trueでSSRのブロッキングをスキップします。リアクティブなURLによって再取得が発生します。命令的なミューテーションには$fetchを使用します。error.vueでエラーを処理します。SSR中はCookieが自動的に転送されます。

よくある質問

「useFetchとuseAsyncData」レッスンは無料ですか？

はい。「useFetchとuseAsyncData」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「useFetchとuseAsyncData」で何を学びますか？

useFetchとuseAsyncDataでサーバー側のデータを取得し、保留中とエラーの状態を処理して、Nuxtがクライアントをハイドレーションする仕組みを理解します。ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/4です。

「useFetchとuseAsyncData」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Frontend Academyに戻る