Veri Fetching ve State Yönetimi: Modern Frontend framework karşılaştırması

Frontend uygulamalarda veri fetching ve state yönetimi hataları sıkça veri tutarsızlığı, gereksiz ağ çağrıları veya kötü kullanıcı deneyimi üretir. Bu makalede React Query, SWR, Redux, Zustand gibi araçların ne zaman tercih edileceğini, nasıl uygulanacağını ve ölçülebilir sonuçları nasıl elde edeceğinizi öğreneceksiniz.

Temel kavramlar: Fetching, cache ve server-state - web programlama eğitimi

Veri fetching ile client tarafı state (UI state) ve server-state (veritabanı, API sonucu) ayrımını doğru yapmak çok önemlidir. Server-state genellikle ağ gecikmesi, cache süresi ve invalidation kuralları gerektirir; bu yüzden React Query veya SWR gibi kütüphaneler tercih edilirken Redux veya Zustand daha çok UI ve lokal state için kullanılır.

Bu ayrımı bilmek, stale, invalid ve optimistic update davranışlarını kontrol etmenizi sağlar. Örneğin React Query otomatik re-fetch, background sync ve cache time parametreleri sunar; SWR ise deduping ve revalidation odaklıdır, Vue geliştiricileri için ise vue-query veya native composables alternatifleri vardır.

Stratejiler karşılaştırması: React Query, SWR, Redux ve lokal state - frontend framework karşılaştırması

Kısa özetle: React Query/SWR - server-state odaklı cache ve revalidation; Redux - global uygulama state ve karmaşık reducer mantıkları; Zustand - hafif, hooks tabanlı client-state. Bu tercihleri belirlerken gecikme toleransı, offline desteği ve veri tutarlılığı kriterlerini ölçün.

Karşılaştırma yaparken ölçülebilir kriter kullanın: ağ çağrısı sayısı, cache hit oranı, first meaningful paint zamanına etkisi ve kullanıcı etkileşim gecikmesi. Angular veya Vue projelerinde de benzer prensipler geçerlidir; örneğin Angular'da RxJS + NgRx kombinasyonu server-state için farklı tradeofflar sunar.

Pratik örnek: React Query ile veri fetching ve cache yönetimi - reactjs eğitimi

Aşağıdaki kod, React Query ile bir ürün listesini fetch edip cache'leyen basit bir kullanım gösterir. Kod, ne yaptığını açıkça ortaya koymak için useQuery kullanımını, fetcher fonksiyonunu ve staleTime parametresini içerir.

Bu örnek fetch, ana hatlarla cache ve arka planda yeniden doğrulama (background refetch) davranışını gösterir; küçük uygulamalarda doğrudan kullanılabilir, büyük projelerde ise error handling ve retry stratejilerini genişletmelisiniz. Kodu örnek kullanım için sade tuttum.

Aşağıda ne yaptığını açıkladım ve ardından neden böyle yazıldığını belirttim.

import { useQuery } from 'react-query'

function fetchProducts() {
  return fetch('/api/products').then(res => res.json())
}

export function useProducts() {
  return useQuery('products', fetchProducts, {
    staleTime: 1000 * 60, // 1 dakika
    refetchOnWindowFocus: false
  })
}

Bu yapı, tek sorumluluk prensibiyle fetch işini fetchProducts fonksiyonuna bırakır ve staleTime ile ağ çağrılarının sıklığını kontrol eder. refetchOnWindowFocus kapalı olduğu için kullanıcı penceresi odaklandığında gereksiz re-fetch engellenir; büyük listeler için bu, ağ maliyetini düşürür.

Gerçek dünya senaryosu: E-ticaret ürün listesi ve stok tutarlılığı

Bir e-ticaret projesinde ürün listeleme ve sepet işlemlerinde stok tutarsızlığı yaşanıyordu; mobil uygulama kullanıcıları aynı ürün için paralel sepet ekleme yaptığında stok yanlış gösteriliyor ve sipariş iptalleri artıyordu. Proje React Native tabanlı bir uygulama ve backend REST API kullanıyordu.

Uygulanan çözüm: ürün listenmesinde React Query ile server-state cache'i uygulandı, sepet güncellemelerinde optimistic update yerine pessimistic confirmation tercih edildi; checkout esnasında sunucuya ön rezervasyon (hold) çağrısı eklenip başarılı onay sonrası client cache invalidation yapıldı. Ayrıca arka planda stok için kısa süreli (15s) revalidation ve WebSocket ile stok değişikliklerini yayınlama eklendi.

Ölçülen sonuçlar: oversell olayları ay bazında %78 azaldı, API çağrı sayısı net 24 saatlik periyotta aynı kullanıcı yükünde %32 düştü ve kullanıcıların checkout tamamlaması için geçen süre ortalama 1.1s azaldı; bu sayıların izlenmesi uygulama başarısını somut şekilde gösterdi.

İleri seviye nüanslar: Race condition, aborting ve cache invalidation - javascript eğitimi

Fetch işlemlerinde en yaygın sorunlardan biri yarış koşulları (race conditions) ve iptal yönetimidir; kullanıcı hızlıca filtre değiştirirse eskiden başlayan istekler sonucunda son durum yanlış güncellenebilir. Bu durumda AbortController ile istek iptali ve request deduping (kütüphane desteği) birlikte kullanılmalıdır.

Aşağıdaki kısa kod, fetch ile AbortController kullanarak istek iptalini gösterir. Kod, component unmount veya yeni sorgu sırasında eskileri iptal etmek için uygundur. Ardından neden bu şekilde yazıldığını açıklıyorum.

const controller = new AbortController()

fetch('/api/search?q=term', { signal: controller.signal })
  .then(r => r.json())
  .then(data => setResults(data))
  .catch(err => {
    if (err.name === 'AbortError') return
    console.error(err)
  })

// yeni sorgu gelince
controller.abort()

AbortController kullanımı, eski isteklerin yanıtının uygulama state'ini bozmasını engeller; hata kontrolünde 'AbortError' filtresi ile gerçek hataları ayırt edersiniz. React Query veya SWR kullanıyorsanız bu iptal mantığı kütüphane içinde soyutlanmıştır, ancak custom fetch yazıyorsanız bu pattern kritik önemdedir.

Uygulama ve geçiş önerileri: Projeye entegrasyon adımları - frontend development eğitimi

Bir projeyi server-state odaklı kütüphanelere geçirmek için adım adım strateji uygulayın: 1) kritik API uç noktalarını tanımlayın, 2) küçük bir modülde (ör. ürün listesi) React Query veya SWR ile prototip oluşturun, 3) ölçümler yapın (API çağrı sayısı, cache hit), 4) test ve monitoring ekleyin, sonra roll-out yapın.

Geçiş sırasında dikkat edilmesi gerekenler: optimistic update kullanırken rollback mekanizması yazın, cache invalidation kurallarını dökümante edin ve e2e testlerde network senaryolarını simüle edin. Angular, Vue veya React Native projelerinde proje mimarinizin gerektirdiği adapterları (ör. vue-query, react-query/native) tercih edin.

Bu konuyu neden öğrenmelisiniz?

Bu konuyu öğrenmek, frontend developer olarak büyük ve veri yoğun uygulamalarda tutarlı kullanıcı deneyimi ve düşük ağ maliyeti sağlamanıza yardımcı olur; iş ilanlarında React Query, SWR veya genel olarak server-state yönetimi bilgisi sıkça aranır.

Projeye kattığı değer somuttur: daha az gereksiz ağ çağrısı, daha az oversell/race bug ve ölçülebilir kullanıcı deneyimi iyileşmeleri sağlar; ayrıca farklı frameworkler (React, Angular, Vue, React Native) arasında taşıma yaparken ortak prensipleri bilmek geçiş maliyetini düşürür.

Özet

• Server-state ve client-state ayrımını net yapın; doğru araçla tutarlılığı sağlayın.
• React Query ve SWR server-state için güçlü cache ve revalidation özellikleri sunar.
• AbortController ve request deduping ile race condition'ları önleyin.
• Gerçek dünya ölçümleri (API çağrısı, oversell, UX gecikmesi) iyileştirmeyi gösterir.
• Kademeli geçiş ve izleme planı ile riskleri azaltarak projeye entegrasyon yapın.

Sık Sorulan Sorular

reactjs eğitimi: React Query ile cache invalidation nasıl yapılır?

Cache invalidation için sorgu anahtarlarını (query keys) mantıklı bölümlere ayırın ve ilgili mutation sonrası queryClient.invalidateQueries(['products']) gibi hedefli invalidation kullanın; ayrıca staleTime ve refetchOnWindowFocus parametrelerini ihtiyaçlarınıza göre ayarlayın.

frontend framework karşılaştırması: Angular ile server-state yönetimi nasıl ele alınır?

Angular'da server-state için genellikle RxJS operatörleri ve NgRx gibi state kütüphaneleri kullanılır; reactive servisler ile cache, retry ve backoff stratejilerini uygulayıp HTTP interceptors ile ortak davranışları yönetmek pratik bir yaklaşımdır.

vuejs eğitimi: Vue projelerinde React Query benzeri bir çözüm mevcut mu?

Evet, vue-query veya vue-apollo gibi kütüphaneler server-state ve cache yönetimini sağlar; ayrıca Composition API ile custom composable'lar yazarak fetch, cache ve revalidation mantığını Vue uygulamanıza entegre edebilirsiniz.

react native eğitimi: Mobilde veri fetching optimizasyonu için hangi öncelikler izlenmeli?

Mobilde ağ ve pil kısıtları nedeniyle cache time optimizasyonu, background sync tasarımı ve gereksiz re-fetchlerin önlenmesi önceliklidir; offline first stratejileri ve arka plan senkronizasyonu kullanıcı deneyimini korur.