Svelte Nedir? Svelte 5 Runes ve Svelte vs React

Svelte, merkezinde bir derleyici olan bir arayüz framework’ü. Bileşenleri HTML, CSS ve JavaScript ile yazarsınız, build aşaması bunları sayfayı güncelleyen JavaScript’e çeviriyor. Bu siteyi de Convetta’yı da SvelteKit ile yapıyorum. Beni Svelte’te tutan şey, bileşenle onun yaptığı iş arasında çok az tören olması.

Svelte nedir

Svelte’in ilk sürümünü Rich Harris Kasım 2016’da yayımladı, lisansı MIT. Bir bileşen tek bir .svelte dosyasında duruyor: işaretleme, stil ve mantık bir arada. Artık niş bir proje sayılmaz: npm paketi bu ay haftada yaklaşık 6 milyon indirme gösteriyor. Stiller varsayılan olarak bileşene özel kalıyor, o yüzden izolasyon için ayrıca CSS-in-JS kütüphanesi gerekmiyor.

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  tıklama: {count}
</button>

Bu, eksiksiz ve reaktif bir bileşen. Resmî tanıtım sayfası derleyiciyi, bildirimsel bileşenleri yalın ve sıkı biçimde optimize edilmiş JavaScript’e çeviren araç olarak anlatıyor. Çıktıda küçük bir çalışma zamanı kodu hâlâ var ama sanal DOM yok. Hangi state’in sayfanın hangi parçasına dokunduğunu derleyici build sırasında çözüyor.

Svelte 5 ve runes

Svelte 5 Ekim 2024’te kararlı sürüme geçti ve ekip onu sıfırdan yazılmış bir sürüm olarak tanımlıyor. Gözle görülen değişiklik runes: adı dolar işaretiyle başlayan ve derleyiciye neyin reaktif olduğunu söyleyen fonksiyonlar.

$state reaktif state tanımlar. Diziler ve düz nesneler derin proxy olur, yani todos[0].done = true da list.push(item) da yalnızca buna bağlı olan yerleri günceller.
$derived başka state’ten hesaplanan değeri tanımlar.
$effect yan etkileri çalıştırır: canvas’a çizmek, bir kütüphaneyi çağırmak gibi işler. DOM güncellendikten sonra çalışır.
$props bileşenin üst bileşenden ne aldığını tanımlar.

Dördü arasında en az kullanılması gereken $effect. Belgeler, efektlerin içinde state güncellemekten kaçınmayı öneriyor, çünkü bu karmaşık koda ve bitmeyen güncelleme döngülerine yol açmaya yatkın. Efektler ayrıca yalnızca tarayıcıda çalışıyor, sunucuda render sırasında hiç çalışmıyor. Efekt yazmaya niyetlendiğimde önce bunun aslında türetilmiş bir değer olup olmadığına bakıyorum. Çoğu zaman öyle çıkıyor.

Gerekçeler yayın yazısında duruyor. Svelte 4’te reaktif bir nesnenin tek bir özelliği değişince nesnenin tamamı geçersiz sayılıyordu, çünkü derleyici o kadarını görebiliyordu. $: etiketi de iki ayrı işi birden yapıyordu, türetilmiş değerleri ve yan etkileri, üstelik bağımlılıklar kod çalışırken değil derlenirken belirleniyordu. Runes bu işleri ayırıyor. Geçiş rehberi vakaların yaklaşık yüzde doksanında istediğinizin $derived olduğunu söylüyor, benim kodum da aynısını gösteriyor: Convetta’da 13 $derived var, 4 $effect.

Runes sıradan fonksiyon çağrıları olduğu için bileşenin dışında da çalışıyor. Bir .svelte.js dosyasında reaktif state tutup bileşenler arasında paylaşabilirsiniz. Svelte 4’te bunun için store’lara yönlendiriliyordunuz. Eski sözdizimi hâlâ derleniyor ve eski bileşenle yeni bileşen aynı projede durabiliyor, yani geçişi bir günde yapmak zorunda değilsiniz.

Bileşen kompozisyonu da değişti. Svelte 4 olay işleyicilerini ve slot içeriğini prop’lardan ayrı kavramlar olarak ele alıyordu. Bu, 2019’da web bileşenleriyle uyum kurma kararının mirasıydı ve yayın yazısı o kararı hata olarak anıyor. Svelte 5’te olay işleyici fonksiyon tutan bir prop. Tekrar kullanılan işaretleme parçaları ise bileşende bir kez tanımlayıp {@render} ile bastığınız snippet’ler. Üst bileşen alt bileşene snippet’i prop olarak da geçebiliyor. Svelte 5’te en rahat okuduğum kısım bu, çünkü bir bileşenin bütün arayüzü prop’ları.

Bilmeye değer bir tuzak var: reaktif bir değeri destructure ederseniz, sıradan JavaScript’teki gibi o andaki değer kopyalanır ve kopya bir daha güncellenmez. $state belgesi bunu açıkça yazıyor.

Svelte 5.36’dan beri script bloğunda, $derived içinde ve işaretlemede await kullanabilirsiniz. Özellik hâlâ deneysel ve derleyici ayarlarında experimental.async istiyor. Bayrağın Svelte 6’da kaldırılması planlanıyor, o yüzden o zamana kadar üzerine bir şey kurmazdım.

Svelte ile React’in farkı

Günlük işte en çok hissedilen fark, kodunuzun ne zaman çalıştığı. React bileşeni her render’da yeniden çalışan bir fonksiyon, bunu da hook’lar ve bağımlılık dizileriyle yönetirsiniz. Svelte’te bileşendeki kod yalnızca oluşturulurken bir kez çalışır. Sonrasında derlenmiş çıktı, değiştirdiğiniz state’e bağlı yerleri günceller. $effect’in bağımlılık dizisi yok, çünkü Svelte efektin çalışırken neyi okuduğunu kendisi kaydediyor.

React’ten gelince ilk hafta çoğunlukla alışkanlık bırakmakla geçiyor. State sıradan bir değişken, ona atama yaparsınız, setter fonksiyonu yok. Türetilmiş değer de render gövdesinde her seferinde yeniden hesaplanmıyor, bir kez tanımlanıyor. Öteki sürtünme eski kaynaklardan geliyor. Birçok eğitim ve cevap hâlâ Svelte 4 sözdizimini gösteriyor (örtük state olarak let, $:, export let) ve bu sözdizimi hâlâ derleniyor, o yüzden bir örneği kopyalamadan önce hangi sözdizimini kullandığınıza bakın.

Kod fazlalığı farkı eskisinden küçük. React Compiler Ekim 2025’te 1.0’a ulaştı ve bileşenleri otomatik olarak memoize ediyor, bu da elle yazılan useMemo ve useCallback işinin büyük kısmını ortadan kaldırıyor. React’in kendisi şu an 19.3. React’ten şikâyetiniz hook kalabalığıysa, geçmeden önce güncel bir kurulumda deneyin.

Hız artık eskisi kadar güçlü bir argüman değil. Svelte ekibi kendi yazısında, diğer framework’lerin sinyal tabanlı ince taneli reaktiviteyi benimseyip performansta Svelte 4’ü geçtiğini söylüyor ve Svelte 5 aynı fikir üzerine kurulu. Gerçek uygulamaları çoğunlukla veri yükleme, görseller ve eklediğiniz kütüphaneler yavaşlatıyor. Bu yüzden bir framework’ü benchmark sayısına bakarak seçmezdim.

Sanal DOM ayrımı da daralıyor. Vue 3.6, tek dosyalı bileşenler için sanal DOM’u atlayan ve isteğe bağlı açılan Vapor Mode’u getiriyor. Bu yazıyı yazarken sürüm release candidate aşamasında, kararlı sürümde yok.

React’in hâlâ önde olduğu yer, framework’ün etrafındaki her şey. Ekosistemi daha büyük, hazır kütüphanesi çok daha fazla, işe alınabilecek insan havuzu daha geniş, mobil için de React Native var. Svelte’te bir şeyi kendin yazmak zorunda kalma ihtimaliniz daha yüksek. Bu takasın değip değmeyeceği ekibin büyüklüğüne ve ürünün ne kadarının yazmak istemediğiniz altyapı olduğuna bağlı.

SvelteKit

Svelte yalnızca bileşenleri çizer. SvelteKit onun üstündeki uygulama framework’ü: yönlendirme, veri yükleme, sunucuda render ve önceden render (prerender) onda. React için Next.js neyse, Vue için Nuxt neyse Svelte için o. Sonucun nerede çalışacağını adaptörler belirliyor, Node sunucusu, statik barındırma ya da edge platformu olabilir. Bir sayfanın sunucuda mu, tarayıcıda mı, yoksa build sırasında mı render edileceğini de rota bazında seçebiliyorsun.

Bu site adapter-static kullanıyor ve sunucusuz, düz HTML, CSS ve JavaScript olarak yayına çıkıyor. Convetta adapter-node kullanıyor ve Docker’da çalışıyor. Sayfalar önceden üretiliyor, JPG, PNG ve WEBP dönüşümü tarayıcıda yapılıyor, yani bu dosyalar ziyaretçinin makinesinden çıkmıyor. İkisi de Svelte 5.57.1 üzerinde.

Ölçtüğüm sayılar

Convetta ana sayfasının production build’ini 10 Ekim 2026’da ölçtüm. Sayfa toplam yaklaşık 163 kB tutan 12 JavaScript dosyası yüklüyor, gzip ile yaklaşık 61 kB. Bunun içinde SvelteKit’in istemci çalışma zamanı ve yönlendiricisi de uygulamanın kendi kodu da var. Yani sayı gerçek bir SvelteKit sayfasının ne tuttuğunu gösteriyor, Svelte’i tek başına ölçmüyor. Seçiminizi paket boyutu belirleyecekse kendi projenizi derleyip sayıları orada okuyun.

Ne zaman seçiyorum

Bir kişinin ya da küçük bir ekibin bakacağı site ve ürünlerde Svelte seçiyorum. Bileşenler kısa kalıyor, reaktivite dosyada görünüyor, yönlendirmeyi ve render’ı tek bir resmî framework karşılıyor. React’i, onu zaten bilen büyük bir ekip için, React Native ile kod paylaşılacaksa ya da gereken kütüphane yalnızca React için varsa seçerim.

Denemek için resmî CLI ile bir SvelteKit projesi oluşturun:

npx sv create my-app
cd my-app
npm install
npm run dev

Tek bir bileşenle başlamak isterseniz playground tarayıcıda çalışıyor.