Nuxt Data Fetching
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
1What is the main difference between useFetch and useAsyncData in Nuxt?
What is the main difference between useFetch and useAsyncData in Nuxt?
Answer
useFetch is a wrapper around useAsyncData and $fetch that simplifies common API calls. It automatically handles URL construction and accepts a URL directly as the first argument, while useAsyncData requires a unique key and a custom fetcher function. Use useFetch for simple API calls, useAsyncData for complex fetching logic.
2Why is it recommended to always provide a unique key when using useAsyncData?
Why is it recommended to always provide a unique key when using useAsyncData?
Answer
The unique key allows Nuxt to identify and deduplicate requests between server and client during SSR hydration. Without a unique key, data might be unnecessarily re-fetched on the client after server rendering, or cache conflicts could occur. The key also serves for caching and state management.
3What is the difference between $fetch and useFetch in Nuxt?
What is the difference between $fetch and useFetch in Nuxt?
Answer
$fetch is a utility function that performs simple HTTP requests without state management or reactivity, similar to native fetch but with Nuxt enhancements. useFetch is a composable that returns reactive refs (data, pending, error) and handles SSR hydration. Use $fetch for imperative calls in event handlers, useFetch for declarative fetching in components.
How to enable lazy fetching with useFetch or useAsyncData?
How to handle errors during data fetching with useFetch?
+17 interview questions
Other Vue.js / Nuxt.js interview topics
JavaScript Fundamentals
Modern JavaScript (ES6+)
Vue Basics
Vue Components
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
Vue Reactivity
Nuxt Fundamentals
Nuxt SSR & SSG
Nuxt Server Routes
Nuxt Modules
Vue Composables
Vue Forms & Validation
Nuxt State Management
Vue Testing
Nuxt Deployment & CI/CD
Vue Performance
Vue Advanced Patterns
TypeScript with Vue
Nuxt Authentication
SEO with Nuxt
Nuxt Internationalization
Vue Architecture
Nuxt Security
Vue Ecosystem
Migration Vue 2→3 & Nuxt 2→3
Master Vue.js / Nuxt.js for your next interview
Access all questions, flashcards, technical tests, code review exercises and interview simulators.
Start for free