Question 1

Nuxt における useFetch と useAsyncData の主な違いは何ですか？

Accepted Answer

useFetch は useAsyncData と $fetch をラップしたもので、一般的な API 呼び出しを簡略化します。URL の構築を自動的に処理し、第一引数として URL を直接受け取れます。一方 useAsyncData は一意のキーとカスタムの fetcher 関数を必要とします。シンプルな API 呼び出しには useFetch を、複雑なフェッチングロジックには useAsyncData を使用します。

Question 2

useAsyncData を使用する際に常に一意のキーを指定することが推奨されるのはなぜですか？

Accepted Answer

一意のキーにより、Nuxt は SSR ハイドレーション中にサーバーとクライアント間のリクエストを識別し、重複を排除できます。一意のキーがないと、サーバーレンダリング後にクライアント側でデータが不必要に再フェッチされたり、caching の競合が発生したりする可能性があります。キーは caching と state 管理にも使用されます。

Question 3

Nuxt における $fetch と useFetch の違いは何ですか？

Accepted Answer

$fetch は、state 管理やリアクティビティを持たずにシンプルな HTTP リクエストを実行するユーティリティ関数で、ネイティブの fetch に似ていますが Nuxt の拡張機能を備えています。useFetch は、リアクティブな ref（data、pending、error）を返し、SSR ハイドレーションを処理する composable です。event handler 内の命令的な呼び出しには $fetch を、コンポーネント内の宣言的なフェッチには useFetch を使用してください。

Nuxt のデータフェッチング

Nuxt における useFetch と useAsyncData の主な違いは何ですか？

回答

useAsyncData を使用する際に常に一意のキーを指定することが推奨されるのはなぜですか？

回答

Nuxt における $fetch と useFetch の違いは何ですか？

回答

useFetch または useAsyncData で lazy fetching を有効にするにはどうすればよいですか？

useFetch でのデータフェッチ中のエラーをどのように処理しますか？

その他のVue.js / Nuxt.js面接トピック

JavaScript の基礎

モダンな JavaScript (ES6+)

Vue の基礎

Vue コンポーネント

Vue Router

Pinia State Management

Vuex (Legacy)

Composition API

Vue のリアクティビティ

Nuxt の基礎

Nuxt の SSR と SSG

Nuxt サーバールート

Nuxt モジュール

Vue のコンポーザブル

Vue フォームとバリデーション

Nuxt の状態管理

Vue のテスト

Nuxt のデプロイと CI/CD

Vue のパフォーマンス

Vue の高度なパターン

VueでのTypeScript

Nuxt認証

Nuxt での SEO

Nuxt の国際化

Vue アーキテクチャ

Nuxt セキュリティ

Vue エコシステム

Vue 2→3 & Nuxt 2→3 の移行

次の面接に向けてVue.js / Nuxt.jsをマスター