0Pricing
Frontend Academy · Pelajaran

useFetch dan useAsyncData

Ambil data sisi server dengan useFetch dan useAsyncData, tangani state menunggu dan error, serta pahami cara Nuxt melakukan hidrasi pada klien.

useFetch dan useAsyncData adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Pengambilan Data dalam Nuxt 3

Nuxt menyediakan dua komposable utama untuk mengambil data: useFetch (berbasis URL, memanggil fetch di balik layar) dan useAsyncData (fungsi asinkron apa pun, dengan kunci unik untuk caching dan deduplikasi).

useFetch — Cara Cepat

Teruskan URL—Nuxt mengambilnya selama SSR, melakukan hidrasi di klien, dan mencegah klien mengambil ulang data saat hidrasi.

<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>

Mengapa Tidak Ada Pengambilan Ganda Saat Hidrasi?

Nuxt menserialisasikan data yang diambil ke dalam muatan HTML SSR. Di klien, useFetch melakukan hidrasi dari muatan tersebut—tidak ada panggilan jaringan kedua. Inilah optimisasi SSR yang utama.

useAsyncData — Asinkron Fleksibel

Gunakan saat pengambilan data bukan sekadar URL—misalnya kueri basis data, logika khusus, atau permintaan multi-langkah.

<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>

Kunci Cache Itu Penting

Argumen pertama useAsyncData adalah kunci cache yang unik. Kunci yang sama, jika digunakan bersama oleh beberapa komponen, menghilangkan duplikasi dan menggunakan kembali hasilnya. Kunci yang berbeda berarti pengambilan data yang independen.

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

Penyegaran dan Lazy

Kedua komposable mengembalikan refresh() untuk mengambil ulang data dan menerima { lazy: true } agar tidak memblokir SSR, sehingga data dimuat setelah halaman dirender.

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 Reaktif dan Watch

Teruskan fungsi untuk URL—URL tersebut bersifat reaktif. Data akan diambil ulang ketika dependensinya berubah.

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

Opsi Permintaan

useFetch menerima opsi yang sama seperti fetch—metode, body, header, serta opsi khusus Nuxt seperti default dan transform.

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

$fetch — Pengambilan Imperatif

$fetch adalah pengambil data universal Nuxt, dengan ofetch di balik layar. Tidak ada pelacakan hidrasi otomatis. Gunakan dalam penangan peristiwa dan mutasi.

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

Penanganan Kesalahan

Lemparkan kesalahan di dalam penangan pengambilan data agar kesalahan tersebut ditampilkan. Halaman dapat menampilkan halaman kesalahan khusus dengan ~/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>

Autentikasi dan Cookie

useFetch secara otomatis meneruskan cookie selama SSR, sehingga permintaan terautentikasi berfungsi baik di server maupun klien tanpa penanganan cookie manual.

useFetch vs useAsyncData — Kapan Digunakan?

useFetch: permintaan sederhana berbasis URL (kasus 95%). useAsyncData: logika asinkron khusus, komposisi multi-langkah, atau sumber non-URL (basis data melalui server/utils).

Cek Cepat

Mengapa useFetch dalam Nuxt 3 mencegah permintaan jaringan duplikat ketika halaman melakukan hidrasi di klien?

Ringkasan: useFetch & useAsyncData

useFetch: berbasis URL, untuk 95% kasus. useAsyncData: logika asinkron khusus dengan kunci cache unik. Keduanya melakukan hidrasi dari payload SSR (tanpa permintaan ganda). Gunakan refresh() untuk mengambil ulang data, dan lazy:true untuk melewati pemblokiran SSR. URL reaktif memicu pengambilan ulang. Gunakan $fetch untuk mutasi imperatif. error.vue menangani kesalahan. Cookie diteruskan secara otomatis selama SSR.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “useFetch dan useAsyncData” gratis?

Ya — teks lengkap “useFetch dan useAsyncData” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “useFetch dan useAsyncData”?

Ambil data sisi server dengan useFetch dan useAsyncData, tangani state menunggu dan error, serta pahami cara Nuxt melakukan hidrasi pada klien. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “useFetch dan useAsyncData” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Perutean Berbasis File dan Impor Otomatis
  2. useFetch dan useAsyncData
  3. Modul Nuxt: Gambar, Autentikasi, i18n
  4. Deployment: Statis vs SSR
← Kembali ke Frontend Academy