Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Giriş — Bu yazıda ne öğreneceksin?
Bu yazıda React ekosisteminin nasıl evrildiğini, neden Next.js gibi framework’lerin ortaya çıktığını ve sonrasında neden TanStack Start gibi yeni bir yaklaşımın doğduğunu anlayacaksın. Ayrıca bu yeni framework’ün sana pratikte ne kazandırdığını, nasıl çalıştığını ve neden “server-first” yaklaşımın önemli olduğunu net şekilde kavrayacaksın.
React neden ortaya çıktı ve neyi çözüyordu?
React, 2013 yılında Facebook içinde geliştirildi. Asıl amacı frontend tarafındaki en büyük problemlerden birini çözmekti: state yönetimi.
Yani şöyle düşün:
Bir sayfada kullanıcı bir butona tıklıyor, veri değişiyor ve UI’ın da buna göre güncellenmesi gerekiyor. Eski dönemde bunu jQuery ile manuel yapıyordun. DOM’u elle güncelliyor, neyin değiştiğini sen takip ediyordun.
React bu işi otomatikleştirdi.
Bunu şöyle hayal edebilirsin:
Sen sadece “veri değişti” diyorsun, React arka planda UI’ı senin yerine yeniden çiziyor.
Bu sayede:
- Kod daha sade oldu
- Hata yapma ihtimali azaldı
- UI yönetimi daha öngörülebilir hale geldi
Next.js neden çıktı ve neyi değiştirdi?
React ilk çıktığında sadece browser (client-side) tarafında çalışıyordu. Ama bu da bazı sorunlar doğurdu:
- SEO zayıf
- İlk yükleme yavaş
- Tüm JavaScript client’a gönderiliyor
Bunun üzerine Next.js ortaya çıktı.
Next.js’in getirdiği en önemli şeylerden biri:
Server-Side Rendering (SSR)
Yani şöyle düşün:
Normalde browser boş bir sayfa alır ve JavaScript çalışınca içerik gelir.
SSR’da ise server sana hazır HTML gönderir.
Bu şu anlama geliyor:
- Daha hızlı ilk yükleme
- Daha iyi SEO
- Daha az client-side yük
Ayrıca Next.js “zero config” yaklaşımıyla geldi.
Bunu şöyle hayal edebilirsin:
Hiç ayar yapmadan çalışan bir sistem. Kur → çalıştır.
Ama zamanla işler karmaşıklaştı.
React ve Next.js neden “karmaşık” hale geldi?
Zamanla React kendi içinde değişmeye başladı:
- Yeni API’ler
- Yeni rendering modelleri
- Server components gibi kavramlar
Next.js de buna ayak uydururken:
- Breaking changes (geriye dönük uyumsuzluklar)
- Güvenlik açıkları
- Artan soyutlama (abstraction)
gibi problemler oluştu.
Yani şöyle düşün:
Başta basit olan sistem, zamanla katman katman büyüyüp anlaşılması zor bir yapıya dönüştü.
TanStack Start neden ortaya çıktı?
Tam bu noktada Tanner Linsley (TanStack ekosisteminin yaratıcısı) farklı bir soru sordu:
“Daha basit, daha hızlı ve daha tip güvenli bir React framework’ü yapamaz mıyız?”
Ve ortaya TanStack Start çıktı.
Bu framework’ün temel yaklaşımı:
- Server-first
- Type-safe
- Performans odaklı
- Az abstraction
Yani şöyle düşün:
Sana sihirli ama karmaşık bir sistem vermek yerine, daha net ve kontrol edilebilir bir yapı sunuyor.
TanStack Start içinde neler hazır geliyor?
Yeni bir proje oluşturduğunda aslında birçok şey otomatik geliyor:
- TypeScript → uçtan uca type safety
- Tailwind CSS → styling
- TanStack Router → routing
- Vitest (VEST) → testing
Yani şöyle düşün:
Tek tek kurulum yapmak yerine, sana hazır bir “developer experience paketi” veriliyor.
Server Functions: Backend ve Frontend birleşiyor
TanStack Start’ın en güçlü özelliklerinden biri:
Server Functions
Eğer sadece server’da çalışması gereken bir kod varsa:
- Database bağlantısı
- File system işlemleri
- Environment variables
bunları server function olarak yazıyorsun.
Ve en kritik nokta:
👉 Bu fonksiyonları frontend’den çağırabiliyorsun
👉 TypeScript tip güvenliği korunuyor
Bunu şöyle hayal edebilirsin:
Frontend’den bir fonksiyon çağırıyorsun ama aslında server’da çalışıyor — ve TypeScript sana hâlâ hata yaptırmıyor.
TanStack Router ve dosya tabanlı routing
TanStack Start, TanStack Router kullanıyor.
Routing sistemi:
File-based routing
Yani:
- Yeni bir sayfa mı eklemek istiyorsun?
👉routes/klasörüne yeni dosya koy
Bu kadar.
Bunu şöyle düşün:
Dosya yapın = uygulamanın sayfa yapısı
Loader mantığı: Veri render’dan önce gelir
Her route için bir loader tanımlayabiliyorsun.
Loader ne yapar?
👉 Sayfa render edilmeden önce veriyi çeker
Yani şöyle düşün:
Sayfa açıldığında önce veri gelir, sonra UI çizilir.
Bu da:
- Daha hızlı deneyim
- Daha az loading state
- Daha temiz UI
API route oluşturmak
TanStack Start sadece UI değil, backend tarafını da kapsıyor.
Eğer bir API endpoint yazmak istiyorsan:
👉 Aynı routing sistemi ile yapıyorsun
👉 createFileRoute + server özelliği kullanıyorsun
Bu şu anlama geliyor:
Frontend ve backend aynı yapı içinde.
Bunu şöyle hayal edebilirsin:
Ayrı bir Express server yazmana gerek yok — framework zaten bunu sağlıyor.
Özet
Aslında hikâye oldukça net: React ile başlayan yolculuk, UI yönetimini kolaylaştırdı ama zamanla karmaşıklaştı. Next.js bu karmaşıklığı çözmek için server tarafını devreye aldı ve büyük bir sıçrama sağladı. Ancak o da büyüdükçe ağırlaştı. TanStack Start ise bu noktada daha sade bir yaklaşım sunuyor: server-first bir mimari, TypeScript ile uçtan uca güvenli yapı, minimum abstraction ve yüksek performans.
Şimdi şöyle bir düşün:
Eskiden frontend ve backend ayrı dünyalardı. Şimdi ise TanStack Start ile bu iki dünya tek bir sistem içinde, daha basit ve daha kontrol edilebilir hale geliyor.
Bu yazı “TanStack Start in 100 Seconds” videosundan ilham alınarak yazılmıştır.
