Frontend Academy · Ders

useFetch ve useAsyncData

Sunucu tarafı verilerini useFetch ve useAsyncData ile almayı, bekleme ve hata durumlarını yönetmeyi ve Nuxt'ın istemciyi nasıl canlandırdığını anlamayı öğrenin.

useFetch ve useAsyncData, CoddyKit'te ücretsiz bir Frontend Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.

Nuxt 3'te Veri Çekme

Nuxt veri çekmek için iki temel birleştirilebilir sunar: useFetch (URL tabanlıdır ve perde arkasında fetch çağırır) ve useAsyncData (önbelleğe alma ve tekilleştirme için benzersiz bir anahtara sahip herhangi bir eşzamansız işlevi kullanır).

useFetch — Hızlı Yol

Bir URL verin — Nuxt, verileri SSR sırasında çeker, istemciyi hazırlar ve istemcinin hidrate olma sırasında verileri yeniden çekmesini önler.

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

Hidrate Olma Sırasında Neden Çift Veri Çekilmez?

Nuxt, çekilen verileri SSR HTML yükünde serileştirir. İstemcide useFetch bu yükten verileri alır — ikinci bir ağ çağrısı yapılmaz. Bu, temel SSR optimizasyonudur.

useAsyncData — Esnek Eşzamansız Veri

Veri çekme işlemi basit bir URL olmadığında kullanın — veritabanı sorguları, özel mantık veya çok adımlı istekler için.

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

Önbellek Anahtarı Önemlidir

useAsyncData için ilk bağımsız değişken benzersiz bir önbellek anahtarıdır. Bileşenler arasında paylaşılan aynı anahtar, yinelenen çağrıları önler ve sonucu yeniden kullanır. Farklı anahtarlar bağımsız veri çekme işlemleri oluşturur.

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

Yenileme ve Tembel Yükleme

Her iki birleştirilebilir de yeniden veri çekmek için refresh() döndürür ve engelleyici SSR'yi atlamak için { lazy: true } kabul eder (veriler sayfa oluşturulduktan sonra yüklenir).

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 });

İzleme ve Tepkisel URL'ler

URL için bir işlev verin — URL tepkisel olur. Bağımlılıklar değiştiğinde veriler yeniden çekilir.

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

İstek Seçenekleri

useFetch, fetch ile aynı seçenekleri kabul eder — yöntem, body, üstbilgiler ve default ile transform gibi Nuxt'e özel seçenekler.

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

$fetch — Buyurgan Veri Çekme

$fetch, Nuxt'in evrensel veri çekicisidir (perde arkasında ofetch kullanır). Otomatik hidrate takibi yapmaz. Olay işleyicilerinde ve değişiklik işlemlerinde kullanın.

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

Hata Yönetimi

Hatayı görünür hâle getirmek için veri çekme işleyicisinin içinde bir hata fırlatın. Sayfalar, ~/error.vue ile özel bir hata sayfası gösterebilir.

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

Kimlik Doğrulama ve Çerezler

useFetch, SSR sırasında çerezleri otomatik olarak iletir; böylece kimliği doğrulanmış istekler, manuel çerez işlemesi olmadan hem sunucuda hem istemcide çalışır.

useFetch ve useAsyncData — Ne Zaman?

useFetch: URL tabanlı basit istekler (%95'lik durum). useAsyncData: özel eşzamansız mantık, çok adımlı birleştirme ve URL olmayan kaynaklar (server/utils üzerinden veritabanı).

Hızlı Kontrol

Nuxt 3'te sayfa istemcide hidrate olduğunda useFetch neden yinelenen bir ağ isteğini önler?

Özet: useFetch ve useAsyncData

useFetch: URL tabanlı, vakaların %95'i için uygundur. useAsyncData: benzersiz bir önbellek anahtarıyla özel eşzamansız mantık kullanır. Her ikisi de SSR yükünden istemciye aktarılır (çift istek gönderilmez). Yeniden veri almak için refresh(), SSR'ı engellememek için lazy:true kullanılır. Tepkisel URL'ler yeniden veri almayı tetikler. Zorunlu değişiklikler için $fetch kullanılır. Hataları error.vue ele alır. SSR sırasında çerezler otomatik olarak iletilir.

Sıkça Sorulan Sorular

“useFetch ve useAsyncData” dersi ücretsiz mi?

Evet — “useFetch ve useAsyncData” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Frontend Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Frontend Academy kursu toplamda 4 dersten oluşur.

“useFetch ve useAsyncData” dersinde ne öğreneceğim?

Sunucu tarafı verilerini useFetch ve useAsyncData ile almayı, bekleme ve hata durumlarını yönetmeyi ve Nuxt'ın istemciyi nasıl canlandırdığını anlamayı öğrenin. Frontend Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Frontend Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Frontend Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“useFetch ve useAsyncData” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Frontend Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Frontend Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Dosya Tabanlı Yönlendirme ve Otomatik İçe Aktarmalar
useFetch ve useAsyncData
Nuxt Modülleri: Görsel, Kimlik Doğrulama ve i18n
Dağıtım: Statik ve SSR Karşılaştırması

← Frontend Academy Sayfasına Dön