Modern frontend uygulamaları büyüdükçe veri yönetimi de karmaşıklaşıyor. API'den gelen verileri cache'lemek, UI'ı güncel tutmak, kullanıcı aksiyonlarını anında yansıtmak ve tüm bunları performanslı yapmak... Geliştiricilerin çoğu bu döngüde useState, useEffect ve bir sürü boilerplate kodla boğuşuyor.
TanStack DB, bu problemi kökünden çözmek için tasarlanmış bir client-side reaktif veritabanı. Differential dataflow motoru sayesinde 100.000 satırlık veri setlerinde bile milisaniye altı sorgular sunuyor ve frontend'de veri yönetimini tamamen yeniden tanımlıyor.
TanStack DB Nedir
TanStack DB, TanStack Query'nin üzerine inşa edilmiş gömülü bir client-side veritabanı. Tanner Linsley ve ekibi tarafından geliştirilen bu kütüphane, frontend uygulamalarda reaktif sorgular, transactional mutation'lar ve gerçek zamanlı senkronizasyon sunuyor.
Kütüphanenin temel vaadi basit: verilerinizi bir koleksiyona koyun, sorguları tanımlayın, gerisini TanStack DB halletsin. Veri değiştiğinde sadece değişen kısımlar yeniden hesaplanır — tüm liste yeniden render edilmez.
React, Vue, Solid, Svelte ve vanilla JavaScript adaptörleriyle framework-agnostik bir yapıda çalışıyor. TanStack ekosisteminin (Query, Router, Form, Start) en yeni ve belki de en iddialı parçası.
Differential Dataflow Neden Önemli
Geleneksel yaklaşımda bir todo listesinde tek bir öğeyi tamamladığınızda, çoğu state management çözümü tüm listeyi yeniden filtreler ve render eder. 10 öğede fark etmezsiniz, 10.000 öğede performans çöker.
TanStack DB'nin differential dataflow motoru farklı çalışır. Sadece değişen veriyi takip eder ve sorgu sonuçlarını incrementally günceller.
Pratik sonuçlar:
- 100.000+ satırlık koleksiyonlarda 1 milisaniyenin altında güncelleme
- Tek bir satır değiştiğinde sadece o satırın query üzerindeki etkisi hesaplanır
- Filtreleme, sıralama ve aggregation işlemleri incremental olarak çalışır
Bu, akademik bir optimizasyon değil. Büyük veri tablolarında, gerçek zamanlı dashboard'larda veya karmaşık filtreleme UI'larında kullanıcı deneyimini doğrudan etkileyen bir performans farkı.
Koleksiyonlar, Live Query ve Mutation Üçlüsü
TanStack DB üç temel kavram üzerine kurulu:
Koleksiyonlar (Collections)
Koleksiyonlar, veritabanındaki tablolarınızın client-side karşılığı. API yanıtlarınızı, domain modellerinizi veya herhangi bir tipli veri setini bir koleksiyonda tutarsınız.
1import { createCollection } from '@tanstack/db'
2
3const todosCollection = createCollection<Todo>({
4 id: 'todos',
5 getId: (todo) => todo.id,
6})Live Query'ler
Live query'ler koleksiyonlardan veri okur ve veri değiştiğinde otomatik olarak güncellenir. Differential dataflow burada devreye girer — sorgu sonuçları sadece değişen kısımlar üzerinden yeniden hesaplanır.
1import { useQuery } from '@tanstack/react-db'
2
3const activeTodos = useQuery({
4 collection: todosCollection,
5 where: { completed: false },
6 orderBy: { createdAt: 'desc' },
7})Mutation'lar
Mutation'lar varsayılan olarak optimistiktir. Veriyi önce lokalde güncellersiniz, kullanıcı değişikliği anında görür, ardından backend'e senkronize edilir. Backend başarısız olursa otomatik rollback yapılır.
1const toggleTodo = createOptimisticAction({
2 collection: todosCollection,
3 mutationFn: async (todo) => {
4 return api.updateTodo(todo.id, { completed: !todo.completed })
5 },
6})Bu üçlü birlikte çalıştığında ortaya güçlü bir döngü çıkıyor: koleksiyona veri yaz → live query otomatik güncellenir → UI anında yansır → backend'e senkronize et → onay gelirse optimistic state atılır, hata gelirse rollback.
Query-Driven Sync ile Backend Entegrasyonu
TanStack DB 0.5 ile gelen Query-Driven Sync özelliği, kütüphanenin belki de en pratik yeniliği. Component'inizdeki query doğrudan API çağrısına dönüşüyor. REST, GraphQL veya tRPC — mevcut backend API'niz ne olursa olsun çalışıyor.
Geleneksel yaklaşımda iki zor tercih vardı:
- Çok sayıda küçük API çağrısı → network waterfall'lar
- Az sayıda büyük API çağrısı → client-side işleme yavaşlığı
Query-Driven Sync ikisinin de avantajını sunuyor: daha az network round-trip ve milisaniye altı client-side sorgular.
ElectricSQL gibi sync engine'lerle entegre edildiğinde ise gerçek zamanlı streaming, otomatik delta senkronizasyonu ve predicate translation gibi ek özellikler devreye giriyor. Bu sayede Postgres veritabanınızdaki değişiklikler otomatik olarak client'a akıyor.
TanStack DB Ne Zaman Tercih Edilmeli
Her proje TanStack DB gerektirmez. İşte doğru tercih yapmanız için bir karşılaştırma:
TanStack DB'yi düşünün eğer:
- Büyük veri setleriyle çalışan tablolar, listeler veya dashboard'lar yapıyorsanız
- Optimistic UI ve anında kullanıcı geri bildirimi kritikse
- Karmaşık filtreleme, sıralama ve aggregation ihtiyacınız varsa
- Local-first veya offline-ready uygulama geliştiriyorsanız
TanStack Query yeterli olabilir eğer:
- Basit CRUD işlemleri ve standart API cache'lemesi yeterliyse
- Veri setleriniz küçük ve filtreleme ihtiyacı minimumse
- Ekibiniz zaten TanStack Query'yi verimli kullanıyorsa
Redux ile birlikte kullanın:
- Redux'ı UI state (tema, modal, navigation) için tutun
- Server state'i TanStack DB veya Query'ye taşıyın
TanStack DB henüz stabil 1.0'a ulaşmadı (şu an 0.5.x), bu yüzden production'da dikkatli değerlendirin. Ancak API tasarımı olgunlaşmış durumda ve breaking change riski giderek azalıyor.
TanStack Ekosisteminin Büyük Resmi
TanStack DB tek başına güçlü, ama asıl potansiyeli ekosistemin parçası olarak ortaya çıkıyor. TanStack Query ile veri fetching, Router ile type-safe routing, Form ile form yönetimi ve Start ile full-stack SSR — hepsi aynı felsefe üzerine kurulu: headless, framework-agnostik ve end-to-end type-safe.
2026'da TypeScript'in standart haline gelmesiyle birlikte, TanStack'in tip güvenliğine dayanan yaklaşımı daha da değerli hale geliyor. Eğer frontend stack'inizi modernize etmeyi düşünüyorsanız, TanStack ekosistemi bütünsel bir çözüm sunuyor.
Sonuç
- TanStack DB, frontend'de client-side reaktif veritabanı konseptini mainstream'e taşıyor
- Differential dataflow motoru sayesinde 100K+ satırda bile milisaniye altı performans sunuyor
- Koleksiyonlar, live query'ler ve optimistic mutation'lar ile veri akışını basitleştiriyor
- Query-Driven Sync, mevcut REST/GraphQL API'lerinizle sıfır migration ile çalışıyor
- ElectricSQL gibi sync engine'lerle gerçek zamanlı Postgres senkronizasyonu mümkün
- Henüz 0.5.x versiyonunda — production'da dikkatli değerlendirmek gerekiyor ama hızla olgunlaşıyor
Frontend veri yönetiminde daha performanslı ve sürdürülebilir çözümler arıyorsanız, TanStack DB'yi bir side project'te deneyerek başlayabilirsiniz. Daha büyük ölçekli projelerde profesyonel yazılım danışmanlığı almak doğru mimari kararları vermenize yardımcı olabilir.
