React uygulamasında API'den veri çekerken dikkat edilmesi gerekenler nelerdir?

Bir veri çekme işleminin ele alması gereken durumlar:

1. Yükleniyor, hata ve boş durumlarının her biri için arayüz
2. Yarış durumu (race condition): kullanıcı hızlıca filtre değiştirirse geç dönen eski cevap yenisinin üzerine yazmamalı → AbortController ile iptal
3. Önbellek: aynı veriyi her bileşen ayrı ayrı çekmemeli
4. Yeniden deneme ve bayat verinin arka planda yenilenmesi
5. Bileşen kaldırıldıktan sonra state güncellenmemeli
6. Waterfall'dan kaçınmak: bağımsız istekler paralel atılmalı

Bunları elle yazmak zor olduğundan gerçek projelerde TanStack Query veya SWR kullanılır:

const { data, isLoading, error } = useQuery({
  queryKey: ["urunler", kategori],
  queryFn: () => fetch(`/api/urunler?k=${kategori}`).then(r => r.json()),
  staleTime: 60_000,
});

Next.js App Router'da veri çekmenin önerilen yeri ise sunucu bileşenleridir.