useAsyncData vs useFetch vs onMounted

Bu üç yöntem birbirine benzese de, çalışma zamanları ve sunucu-tarayıcı etkileşimi açısından önemli farklar içerir.

Bu yazıda, hangi yöntemi ne zaman kullanman gerektiğini, SSR (Server-Side Rendering) ve CSR (Client-Side Rendering) farklarıyla birlikte ele alıyoruz.

Nuxt’ın Farkı Nedir?

Normal Vue projelerinde veri çekmek için genellikle onMounted veya fetch gibi yöntemler kullanılır. Ancak Nuxt, SSR desteği sayesinde sayfa ilk yüklendiğinde verileri sunucu tarafında getirip HTML’e gömebilir. Böylece sayfa daha hızlı yüklenir ve SEO dostu olur.

Nuxt 3’te veri çekme yalnızca teknik bir detay değil, render stratejisinin bir parçasıdır.

useAsyncData

useAsyncData, hem sunucu hem istemci tarafında çalışabilen SSR dostu bir veri çekme yöntemidir. Sayfa render edilmeden önce veriyi getirir ve sayfa yüklendiğinde içerik hazır olur.

<script setup>
const { data: products, pending, error } = await useAsyncData('products', () => $fetch('/api/products'))
</script>

Ne zaman kullanılır?

Sayfa ilk yüklendiğinde verinin hazır olması gerekiyorsa.
SEO önemliyse (örneğin blog, e-ticaret, haber siteleri).
Sayfa geçişlerinde veriyi yeniden önbelleğe almak istiyorsan.

Artıları

SSR desteği tam.
Otomatik caching (key bazlı).
pending, error ve refresh durumları entegre.
Kod okunabilirliği yüksek.

Eksileri

Sadece setup aşamasında kullanılabilir.
Her await işlemi render’ı bekletir (gereksiz yerde kullanılırsa yavaşlama olabilir).

Not: useAsyncData veriyi bir kere çeker ve cache’ler. Aynı key ('products') ile tekrar çağırırsan, Nuxt önbellekten döner.

useFetch

useFetch, useAsyncData’in bir kısayolu gibidir. Aynı mantıkla çalışır ama $fetch’i entegre eder, yani ekstra fonksiyon yazmana gerek kalmaz.

<script setup>
const { data, pending, error } = await useFetch('/api/posts')
</script>

Ne zaman kullanılır?

Basit GET istekleri için.
API endpoint sabitse (örneğin /api/posts).
useAsyncData’daki gibi caching ve SSR desteği de vardır.

Artıları

Tek satırda basit veri çekme.
$fetch ile otomatik JSON parse.
SSR uyumlu.

Eksileri

Daha karmaşık işlemler (örneğin parametreli istekler veya transform gerektiren durumlar) için esnek değildir.
useAsyncData’ya göre kontrol azdır.

Kısaca: useFetch = useAsyncData + $fetch kolaylığı.

onMounted

onMounted klasik Vue Hook’udur. Yalnızca istemci tarafında (Client-Side) çalışır. Yani sunucu render sırasında devreye girmez.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])

onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

Ne zaman kullanılır?

Veri SSR sırasında değil, yalnızca tarayıcıda lazımsa (örneğin kullanıcı özel içerikleri).
SSR yapılmayan bileşenlerde.
Sayfa etkileşimi (scroll, click) sonrası dinamik yüklemelerde.

Artıları

SSR yükünü azaltır.
Basit dinamik işlemler için idealdir.

Eksileri

SEO açısından uygun değildir.
Sayfa boş olarak yüklenir, sonra içerik gelir (Flicker etkisi).

SSR vs CSR Karşılaştırması

Özellik	useAsyncData	useFetch	onMounted
Çalışma zamanı	SSR + CSR	SSR + CSR	Sadece CSR
SEO desteği	✅	✅	❌
Caching	✅	✅	❌
Kullanım kolaylığı	Orta	Kolay	Basit
Performans	En optimize	Optimize	En hafif

Gerçek Hayat Senaryoları

Blog Sayfası:

const { data: posts } = await useAsyncData('posts', () => $fetch('/api/posts'))

SSR destekli olmalı → useAsyncData ✅

Dashboard Widget:

const { data } = await useFetch('/api/stats')

Küçük veri, hızlı yükleme → useFetch ✅

Kullanıcıya özel veri:

onMounted(async () => {
  const profile = await fetchUser()
})

Token veya cookie gerekliyse → onMounted ✅

İleri Seviye: Lazy Loading ve Parametreli İstekler

Hem useAsyncData hem useFetch lazy ve server opsiyonlarını destekler:

const { data, refresh } = await useAsyncData('user', () => $fetch(`/api/user/${id}`), {
  lazy: true,
  server: false
})

lazy: true → render’ı beklemeden veriyi sonradan getirir.
server: false → SSR sırasında çalışmaz, sadece istemcide çalışır.

Bu kombinasyonlarla SSR ve CSR arasında tam kontrol senin elinde olur.

Sonuç

Nuxt 3, veri çekme konusunda üç güçlü araca sahiptir:

useAsyncData: SSR odaklı, SEO dostu, cache destekli.
useFetch: Basit ve pratik, genellikle statik istekler için.
onMounted: Sadece client-side, kullanıcı etkileşimleri veya özel durumlar için.

Kısaca:

SEO istiyorsan → useAsyncData
Basit API istiyorsan → useFetch
Kullanıcı özel veri istiyorsan → onMounted

Doğru yöntemi seçmek, hem performansı hem kullanıcı deneyimini doğrudan etkiler.

useAsyncData vs useFetch vs onMounted: Veri Nerede Ne Zaman Çekilmeli?