Data Fetching Nuxt
useFetch, useAsyncData, $fetch, lazy fetching, error handling, refresh, data caching
1Apa perbedaan utama antara useFetch dan useAsyncData di Nuxt?
Apa perbedaan utama antara useFetch dan useAsyncData di Nuxt?
Jawaban
useFetch adalah wrapper di sekitar useAsyncData dan $fetch yang menyederhanakan panggilan API umum. Ia secara otomatis menangani konstruksi URL dan menerima URL langsung sebagai argumen pertama, sedangkan useAsyncData memerlukan key unik dan fungsi fetcher khusus. Gunakan useFetch untuk panggilan API sederhana, useAsyncData untuk logika fetching yang kompleks.
2Mengapa disarankan untuk selalu menyediakan key unik saat menggunakan useAsyncData?
Mengapa disarankan untuk selalu menyediakan key unik saat menggunakan useAsyncData?
Jawaban
Key unik memungkinkan Nuxt mengidentifikasi dan mendeduplikasi permintaan antara server dan client selama hidrasi SSR. Tanpa key unik, data mungkin di-fetch ulang secara tidak perlu di client setelah rendering server, atau konflik caching dapat terjadi. Key juga berfungsi untuk caching dan manajemen state.
3Apa perbedaan antara $fetch dan useFetch di Nuxt?
Apa perbedaan antara $fetch dan useFetch di Nuxt?
Jawaban
$fetch adalah fungsi utilitas yang melakukan permintaan HTTP sederhana tanpa manajemen state maupun reaktivitas, mirip dengan fetch native namun dengan peningkatan Nuxt. useFetch adalah composable yang mengembalikan ref reaktif (data, pending, error) dan menangani hidrasi SSR. Gunakan $fetch untuk panggilan imperatif di dalam event handler, dan useFetch untuk fetching deklaratif di dalam komponen.
Bagaimana cara mengaktifkan lazy fetching dengan useFetch atau useAsyncData?
Bagaimana cara menangani error selama data fetching dengan useFetch?
+17 pertanyaan wawancara
Topik wawancara Vue.js / Nuxt.js lainnya
Dasar-Dasar JavaScript
JavaScript Modern (ES6+)
Dasar-Dasar Vue
Komponen Vue
Vue Router
Pinia State Management
Vuex (Legacy)
Composition API
Reaktivitas Vue
Dasar-Dasar Nuxt
SSR & SSG Nuxt
Server Routes Nuxt
Modul Nuxt
Composable Vue
Form & Validasi Vue
Manajemen State Nuxt
Testing Vue
Deployment Nuxt & CI/CD
Performa Vue
Pola Lanjutan Vue
TypeScript dengan Vue
Autentikasi Nuxt
SEO dengan Nuxt
Internasionalisasi Nuxt
Arsitektur Vue
Keamanan Nuxt
Ekosistem Vue
Migrasi Vue 2→3 & Nuxt 2→3
Kuasai Vue.js / Nuxt.js untuk wawancara berikutnya
Akses semua pertanyaan, flashcards, tes teknis, latihan code review dan simulator wawancara.
Mulai gratis