TanStack Start Dökümantasyonu

TanStack Start Nedir?

TanStack Start, modern web standartları üzerine kurulmuş, full-stack React framework’üdür. TanStack ekosisteminin gücünü (Router, Query, Form, Table) tek bir çatı altında sunar.

Neden TanStack Start?

⚡ Yüksek Performans

Optimize edilmiş bundle boyutları, akıllı code-splitting ve Streaming SSR ile muhteşem performans. Vite tabanlı hızlı geliştirme deneyimi.

📘 Type-Safe

Tam tip güvenliği. Router, server functions ve state yönetimi arasında uçtan uca type inference. Runtime hatalarını minimize edin.

📦 All-in-One

Router, Query, Form, Table, Store, Virtual - hepsi dahil. Ayrı paketler kurmanıza gerek yok. Bir framework, tüm çözüm.

🌐 Modern Web Standartları

Web Streams, Request/Response API, fetch standartları üzerine kurulmuş. Cloudflare, Vercel, Netlify, Node.js - her yerde çalışır.

Öğrenme Yolculuğu

TanStack Start dökümantasyonu 10 bölümden oluşan kapsamlı bir eğitim programı sunar:

Başlangıç (1-2)

• Bölüm 1: Giriş ve Kurulum - Framework tanıtımı, proje oluşturma ve temel yapı
• Bölüm 2: Routing Temel - File-based routing, route parametreleri, navigasyon

Temel Özellikler (3-5)

• Bölüm 3: Routing Orta - Nested routes, route guards, loading states
• Bölüm 4: Server Functions Giriş - Server functions, veri fetching, loader’lar
• Bölüm 5: Server Functions Orta - Action’lar, form handling, error handling

İleri Seviye (6-8)

• Bölüm 6: State Management - Client state, server state entegrasyonu
• Bölüm 7: SSR Rendering Modes - Client vs Server, streaming, lazy loading
• Bölüm 8: Authentication & Authorization - Auth guards, protected routes

Uzmanlık (9-10)

• Bölüm 9: Form Yönetimi & Validasyon - TanStack Form entegrasyonu
• Bölüm 10: Deployment & Produksiyon - Build, deploy, optimizasyon

Kullanım Alanları

// Server Function ile Veri Fetching
import { createServerFn } from '@tanstack/start/server'

export const getUser = createServerFn('GET', async (id: string) => {
  const user = await db.users.findUnique({ where: { id } })
  return user
})

// Route'da Kullanımı
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/users/$userId')({
  loader: ({ params }) => getUser({ data: params.userId }),
  component: UserDetail
})

Başlayın

İlk adımı atmak ve geliştirme ortamınızı hazırlamak için başlangıç rehberini inceleyin.

🚀 Hızlı Başlangıç

5 dakika içinde ilk TanStack Start projenizi oluşturun ve çalıştırın.

📖 Temel Kavramlar

File-based routing, server functions ve loader’lar ile TanStack Start temellerini öğrenin.

💻 Örnek Projeler

Gerçek dünya örnekleri ile öğrendiklerinizi pekiştirin.