React Ekosisteminde Yeni Soluk: TanStack Start ile Tip Güvenli Full-Stack Geliştirme

0:00

/0

1×

React Ekosisteminde Yeni Soluk: TanStack Start ile Tip Güvenli Full-Stack Geliştirme

React ekosistemi son birkaç yıldır büyük bir dönüşümden geçiyor. Next.js ve React Server Components (RSC) mimarisi web geliştirmede standart haline gelmeye çalışırken, beraberinde getirdiği karmaşıklık, soyutlama katmanları ("magic") ve öğrenme eğrisi birçok geliştiricinin kafasını karıştırmaya başladı.

İşte tam bu noktada, modern web dünyasının en sevilen kütüphanelerinden biri olan TanStack Router üzerine inşa edilen yepyeni bir framework sahneye çıkıyor: TanStack Start.

TanStack Start; karmaşık Server Components yapısı yerine açıklayıcı (explicit) Server Functions, uçtan uca tip güvenliği (end-to-end type safety) ve Vite hızıyla Next.js’e oldukça güçlü, öngörülebilir ve geliştirici dostu bir alternatif sunuyor.

Bu yazıda, TanStack Start’ın ne olduğunu, sunduğu yenilikleri ve neden full-stack React geliştirme süreçlerinizi kökten değiştirebileceğini inceleyeceğiz.

TanStack Start Nedir?

TanStack Start, Tanner Linsley ve TanStack ekibi tarafından geliştirilen, Vite ve Vinxi altyapısını kullanan full-stack bir React framework'üdür.

Esasen TanStack Start’ı özel kılan şey, sıfırdan yazılmış bir framework olmamasıdır. Gücünü halihazırda üretim ortamlarında kendisini kanıtlamış olan TanStack Router’dan alır. TanStack Router’ın sunduğu istemci tarafı yönlendirme (routing), state yönetimi ve mükemmel TypeScript entegrasyonu, TanStack Start ile sunucu tarafına (SSR, Streaming, Server Functions) taşınır.

Temel Mimari Yapıtaşları:

1. Vite & Vinxi: Yıldırım hızında HMR (Hot Module Replacement) ve platformdan bağımsız (Agnostic) deployment.
2. TanStack Router: URL'deki parametrelerden loader'lara kadar %100 tip güvenliği sağlayan yönlendirme motoru.
3. Server Functions: İstemci ile sunucu arasındaki sınırı tamamen tip güvenli bir RPC (Remote Procedure Call) yapısıyla birleştiren mekanizma.

Neden TanStack Start? RSC Karmaşasına Karşı "Açıklayıcı" Yaklaşım

Next.js App Router ile gelen React Server Components, bileşen seviyesinde async/await yazmamıza imkan tanısa da, geliştiriciler için "Neresi sunucuda çalışıyor, neresi istemcide?" sorusunu sormayı zorlaştırdı.

TanStack Start ise daha açıklayıcı (explicit) bir zihinsel model (mental model) sunar:

• İstemci Bileşenleri Önceliklidir: Bileşenleriniz varsayılan olarak tahmin edilebilir React bileşenleridir.
• Sunucu Mantığı Belirgindir: Sunucuda bir kod çalıştırmak istediğinizde bunu gizli veya sihirli kurallarla değil, createServerFn gibi açık fonksiyonlar aracılığıyla yaparsınız.

Bu yaklaşım, kodun nerede çalıştığını anlamayı kolaylaştırırken, RSC'nin getirdiği hydration hataları veya karmaşık "use client / use server" kurallarının yarattığı stresi ortadan kaldırır.

TanStack Start’ın Öne Çıkan Güçlü Özellikleri

1. Uçtan Uca (End-to-End) Tip Güvenliği

TypeScript kullanıyorsanız TanStack Start sizin için bir cennet. - URL rotalarınız, - URL içindeki search params (query string), - Sunucudan çekilen veri (loader), - Sunucuya gönderilen istekler (Server Functions),

hepsi otomatik olarak tip denetiminden geçer. Bir rota ismini veya sunucu fonksiyonunun döndürdüğü objeyi değiştirdiğinizde, istemci tarafındaki hata anında kod editörünüzde (VS Code vb.) kırmızılanır.

2. Arama Parametreleri (Search Params) İlk Sınıf Vatandaştır

TanStack Router'ın en büyük güçlerinden biri olan "Search Params as State" anlayışı TanStack Start'ta da devam eder. URL üzerindeki arama parametreleri Zod veya Valibot gibi kütüphanelerle doğrulanır ve tip güvenli bir React State gibi kullanılır. Bu sayede sayfalama (pagination), filtreleme ve sıralama işlemleri inanılmaz derecede kolaylaşır.

3. Esnek Render Stratejileri

• SSR (Server-Side Rendering): İlk yüklemede hızlı HTML sunumu ve SEO.
• Streaming SSR: Ağır verileri bekletmeden sayfanın parça parça istemciye akıtılması.
• SPA Modu: İsteğe bağlı olarak tamamen istemci tarafında çalışan dinamik uygulamalar.
• Static Pre-rendering (SSG): Statik siteler için derleme zamanında HTML oluşturma.

Kod Üzerinde Görelim: Server Functions ve Loader Entegrasyonu

TanStack Start'ta sunucuda bir işlem yapmak ve bu veriyi istemciye güvenli bir şekilde aktarmak son derece basittir.

Aşağıdaki örnekte, sunucu tarafında çalışan bir fonksiyon tanımlayıp bunu sayfa yüklenirken (loader) nasıl kullanacağımızı görebilirsiniz:

import { createFileRoute } from '@tanstack/react-router'
import { createServerFn } from '@tanstack/start'

// 1. Sunucu Fonksiyonu Tanımlama (Server Function)
const getUser = createServerFn({ method: 'GET' })
  .validator((userId: string) => userId) // Girdi doğrulaması
  .handler(async ({ data }) => {
    // Bu blok SADECE sunucuda çalışır (Veritabanı sorgusu vb.)
    console.log(`Sunucuda kullanıcı aranıyor: ${data}`)
    return {
      id: data,
      name: 'Ahmet Yılmaz',
      email: '[email protected]',
    }
  })

// 2. Rota ve Loader Tanımlama
export const Route = createFileRoute('/users/$userId')({
  loader: async ({ params }) => {
    // Sunucu fonksiyonunu tip güvenli şekilde çağırıyoruz
    const user = await getUser({ data: params.userId })
    return { user }
  },
  component: UserProfile,
})

// 3. İstemci Bileşeni
function UserProfile() {
  // Route.useLoaderData() tam tip güvenli veriyi döndürür
  const { user } = Route.useLoaderData()

  return (
    <div className="p-4 border rounded-lg">
      <h1 className="text-xl font-bold">{user.name}</h1>
      <p className="text-gray-600">{user.email}</p>
    </div>
  )
}

Yukarıdaki örnekte getUser handler'ı içindeki veritabanı mantığı istemciye gönderilen JavaScript paketi (bundle) içine dahil edilmez. TanStack Start, bu iletişimi arka planda tip güvenli bir API çağrısına dönüştürür.

Next.js mi, TanStack Start mı?

Hangi aracı seçmeniz gerektiği projenizin ihtiyaçlarına ve ekibinizin zihinsel model tercihlerine bağlıdır.

Şu durumlarda TanStack Start’ı tercih edebilirsiniz: - Projenizde Vite hızından faydalanmak istiyorsanız. - TypeScript’in tip güvenliğini kodun her alanında (özellikle rotalar ve query string'lerde) hissetmek istiyorsanız. - RSC'nin getirdiği karmaşıklıktan uzak durup, geleneksel SPA esnekliğini SSR gücüyle birleştirmek istiyorsanız. - Zaten projenizde TanStack Query (React Query) veya TanStack Router kullanıyorsanız.

Sonuç

React ekosisteminde rekabet her zaman geliştiricilerin lehine olmuştur. Next.js uzun süredir full-stack React dünyasını domine etse de, TanStack Start geliştirici deneyimini (DX) ön plana çıkaran, tahmin edilebilir ve tip güvenliği yüksek yapısıyla harika bir alternatif sunuyor.

Eğer yeni bir projeye başlayacaksanız ve Vite ekosisteminin hızıyla TypeScript'in gücünü arkanıza almak istiyorsanız, TanStack Start'a kesinlikle bir şans vermelisiniz.

Siz TanStack Start hakkında ne düşünüyorsunuz? React Server Components karmaşasına karşı Server Functions yaklaşımı sizce de daha sürdürülebilir mi? Yorumlarda düşüncelerinizi paylaşmayı unutmayın!