Vue Academy · レッスン

データ取得：useFetchとuseAsyncData

useFetch()、useAsyncData()、サーバーサイドとクライアントサイドのfetch、refresh()、pending状態

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

Nuxt でデータを取得する

Nuxt には SSR に対応したデータ取得用の Composable が用意されています。これらは描画時にサーバーで実行され、結果をクライアントに渡します。そのため、重複したリクエストや空のコンテンツが一瞬表示される現象を避けられます。

useFetch の基本

useFetch は URL への fetch をラップします。リアクティブな data、pending、error の値を返すため、テンプレートから直接利用できます。

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

ローディングとエラーの表示

ローディング状態にはpendingを、失敗にはerrorを使用します。パース済みのJSONはdataに格納されます。

<template>
  <p v-if="pending">Loading...</p>
  <p v-else-if="error">Failed to load</p>
  <ul v-else>
    <li v-for="p in data" :key="p.id">{{ p.title }}</li>
  </ul>
</template>

カスタムロジックのためのuseAsyncData

単純なURL以上の処理（複数の呼び出しを組み合わせたり、結果を変換したりする場合）が必要なら、useAsyncDataを使用します。一意のキーとフェッチャー関数を受け取ります。

const { data } = await useAsyncData('posts', () => {
  return $fetch('/api/posts')
})

キーが重要な理由

キーによってリクエストの重複排除とキャッシュが行われます。同じキーを使用する2つのコンポーネントは、1つの結果と1回のネットワーク呼び出しを共有するため、重複したフェッチを防げます。

useFetchはシンタックスシュガー

内部的には、useFetch(url)は自動生成されたキーと$fetch(url)フェッチャーを使うuseAsyncDataとほぼ同じです。単純なURLにはuseFetchを、カスタムフェッチャーにはuseAsyncDataを使用します。

server:falseでクライアントのみ

server: falseを設定すると、SSR中のフェッチをスキップしてクライアントでのみ実行できます。サーバーのレンダリングをブロックしたくないユーザー固有のデータに便利です。

const { data } = await useFetch('/api/me', {
  server: false
})

遅延フェッチとノンブロッキングフェッチ

デフォルトでは、データが届くまでawaitによってナビゲーションがブロックされます。lazyオプション（またはuseLazyFetch）を使うと、ページをすぐにレンダリングし、データの解決後に内容を埋め込めます。

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

refreshによる再フェッチ

コンポーザブルはrefresh関数を返します。この関数を使うと、ミューテーションやボタンのクリック後など、必要なタイミングでフェッチを再実行できます。

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

リアクティブなクエリパラメータ

queryまたはリアクティブなオプションを渡すと、監視対象のrefが変更されたときにフェッチが自動的に再実行されます。watchを指定すると、依存関係の変更時に再フェッチできます。

const page = ref(1)
const { data } = await useFetch('/api/posts', {
  query: { page },
  watch: [page]
})

レスポンスの変換

transformオプションを使うと、レスポンスがdataに渡される前に形を変えられます。必要なフィールドだけを選び、クライアントに送るペイロードを小さくするのに便利です。

const { data } = await useFetch('/api/user', {
  transform: (u) => ({ name: u.name, id: u.id })
})

理解度チェック

Nuxtのデータフェッチに関する理解度を確認します。

まとめ

Nuxtのデータフェッチについて学びました。

useFetchはリアクティブなdata、pending、errorを返します。
useAsyncDataは、カスタムロジックのためにキーとフェッチャーを受け取ります。
server:falseはクライアントでのみ実行し、lazyはフェッチをノンブロッキングにします。
refresh()は再フェッチを実行し、watchは依存関係の変更時に再実行します。

よくある質問

「データ取得：useFetchとuseAsyncData」レッスンは無料ですか？

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

「データ取得：useFetchとuseAsyncData」で何を学びますか？

useFetch()、useAsyncData()、サーバーサイドとクライアントサイドのfetch、refresh()、pending状態ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

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

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

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

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

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

← Vue Academyに戻る