SvelteKit 2026: Async SSR ve Remote Functions ile Yüksek Performanslı Web Geliştirme

SvelteKit 2026: Nerede Duruyoruz? (Current State of the Ecosystem)

Şubat 2026 itibarıyla SvelteKit, frontend geliştirme dünyasında yerini sağlamlaştırmış durumda. React ve Next.js gibi köklü framework'lerin hâkimiyeti sürse de SvelteKit, özellikle performans odaklı projelerde tercih edilen birinci seçenek haline geldi. Alesta Web ekibi olarak bu trendi yakından takip ediyoruz.

SvelteKit'in en büyük avantajı, compile-time (derleme zamanı) yaklaşımı. Svelte, bileşenleri tarayıcıya göndermek yerine build aşamasında optimize edilmiş JavaScript'e dönüştürür. Bu sayede runtime'da (çalışma zamanında) sanal DOM manipülasyonu yaşanmaz, uygulamalar doğal olarak daha hafif ve hızlı olur.

Ocak ve Şubat 2026 güncellemeleriyle birlikte SvelteKit iki kritik deneysel özelliği daha olgunlaştırdı:

• Async SSR (Asenkron Sunucu Taraflı Render) — v5.39.3 ve SvelteKit v2.43.0+
• Remote Functions ile batching ve lazy discovery geliştirmeleri — v2.38.0+

Alesta Web projelerinde her iki özelliği de test ettik. Aşağıda edindiğimiz bulguları paylaşıyoruz.

Async SSR Nedir? (Asynchronous Server-Side Rendering)

Geleneksel SSR (server-side rendering) yaklaşımında sunucu, tüm sayfanın HTML'ini tamamlayıp bir bütün olarak tarayıcıya gönderir. Bir bileşen veri beklerken tüm render işlemi bloke olur. Bu durum özellikle API çağrıları yoğun olan sayfalarda ciddi gecikmelere yol açar.

Async SSR, bu sorunu kökten çözüyor. SvelteKit v2.43.0 ile gelen bu experimental (deneysel) özellik sayesinde bileşenler asenkron olarak render edilebiliyor. Sayfanın hazır olan kısımları tarayıcıya akıtılırken (streaming), veri bekleyen kısımlar arka planda işlenmeye devam ediyor.

Teknik olarak ne değişiyor? Artık her şeyi load() fonksiyonuna ya da +page.ts dosyasına taşımanıza gerek yok. Bileşen içinde doğrudan await kullanabiliyorsunuz. SSR bu await ifadelerinin hepsinin çözüme kavuşmasını bekliyor, ancak bunu paralel ve akıllı biçimde yapıyor.

// +page.ts — Her şeyi burada toplamak zorundaydınız
export async function load({ fetch }) {
  const [kullanici, urunler, yorumlar] = await Promise.all([
    fetch('/api/kullanici').then(r => r.json()),
    fetch('/api/urunler').then(r => r.json()),
    fetch('/api/yorumlar').then(r => r.json()),
  ]);
  return { kullanici, urunler, yorumlar };
}
      

<!-- Kullanici.svelte — Async SSR ile doğrudan await -->
<script>
  // Bileşen içinde async/await kullanabilirsiniz
  const kullanici = await fetch('/api/kullanici').then(r => r.json());
  const urunler = await fetch('/api/urunler').then(r => r.json());
</script>

<h1>Hoş geldin, {kullanici.isim}!</h1>
<ul>
  {#each urunler as urun}
    <li>{urun.ad} — {urun.fiyat} TL</li>
  {/each}
</ul>
      

Alesta Web ekibi bu yöntemi içerik ağırlıklı bir projede denedi. Sonuç olarak Time to Interactive (etkileşim süresi) metriğinde belirgin iyileşme gözlemledik — kullanıcı, sayfanın tamamını beklemek zorunda kalmadan üst kısımla etkileşime geçebiliyor.

Async SSR Nasıl Etkinleştirilir? (Configuration Guide)

Async SSR'ı projenize entegre etmek için svelte.config.js dosyasında birkaç satırlık değişiklik yeterli. Alesta Web olarak bu adımları tek tek test ettik ve şu konfigürasyonu kullandık:

import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
  preprocess: vitePreprocess(),
  kit: {
    adapter: adapter(),
    experimental: {
      // Remote Functions aktif et
      remoteFunctions: true,
    },
  },
  compilerOptions: {
    experimental: {
      // Async SSR aktif et
      async: true,
    },
  },
};

export default config;
      

Bu yapılandırmanın ardından SvelteKit, bileşenlerinizde await kullanımını SSR aşamasında desteklemeye başlıyor. Hydration (hidrasyon) sürecinde ise sunucuda çözülen değerler yeniden ağ isteği yapılmadan doğrudan kullanılıyor — bu kritik bir performans kazanımı.

Remote Functions ile Veri Yönetimi (Server-Client Data Bridge)

Remote Functions, SvelteKit'in en heyecan verici özelliklerinden biri. Sunucu tarafında çalışan fonksiyonları, istemci tarafından sanki local (yerel) bir fonksiyon çağırır gibi kullanmanızı sağlıyor. Geleneksel REST API yaklaşımının getirdiği boilerplate (tekrarlayan şablon kod) yükünü ciddi ölçüde azaltıyor.

Alesta Web uzmanları bu özelliği e-ticaret projelerinde uyguladı. Ürün listeleme, sepet yönetimi ve kullanıcı profili gibi bileşenler artık ayrı API endpoint'leri oluşturmak zorunda kalmadan sunucu verilerine doğrudan erişiyor.

// lib/server/urunler.ts — Sunucu tarafı
import { query } from '$lib/server/db';

// "use server" direktifi bu fonksiyonu remote yapar
export async function urunleriGetir(kategori: string) {
  'use server';
  const urunler = await query(
    'SELECT * FROM urunler WHERE kategori = ? AND aktif = 1',
    [kategori]
  );
  return urunler;
}

export async function sepeteEkle(urunId: number, miktar: number) {
  'use server';
  // Sunucuda çalışır, veritabanına güvenle erişir
  await query('INSERT INTO sepet (urun_id, miktar) VALUES (?, ?)', [urunId, miktar]);
  return { basarili: true };
}
      

<!-- UrunListesi.svelte -->
<script>
  import { urunleriGetir, sepeteEkle } from '$lib/server/urunler';

  // Async SSR ile doğrudan await!
  const urunler = await urunleriGetir('elektronik');

  async function handleSepet(urunId: number) {
    const sonuc = await sepeteEkle(urunId, 1);
    if (sonuc.basarili) alert('Sepete eklendi!');
  }
</script>

{#each urunler as urun}
  <div class="urun-karti">
    <h3>{urun.ad}</h3>
    <p>{urun.fiyat} TL</p>
    <button onclick={() => handleSepet(urun.id)}>Sepete Ekle</button>
  </div>
{/each}
      

Şubat 2026 güncellemesiyle remote function çağrıları artık observability araçlarında /_app/remote rotası altında izlenebiliyor. Bu, production (üretim) ortamında debugging (hata ayıklama) sürecini önemli ölçüde kolaylaştırıyor.

Remote Function Batching: N+1 Problemini Çözme (Query Optimization)

Web geliştirmede en sık karşılaşılan performans sorunlarından biri N+1 query (sorgu) problemidir. Bir liste render edilirken her öğe için ayrı ayrı API isteği yapılması, ağ trafiğini patlama noktasına taşır. SvelteKit'in query.batch() fonksiyonu bu sorunu zarif biçimde çözüyor.

Alesta Web olarak dashboard (gösterge paneli) projelerinde bu sorunu bizzat yaşadık. Aynı sayfada 8 farklı widget'ın her biri ayrı API çağrısı yapıyordu. query.batch() ile tüm bu çağrılar tek bir HTTP isteğinde toplandı.

<!-- Dashboard.svelte — Her widget ayrı istek yapıyor -->
<!-- 8 widget = 8 ayrı HTTP isteği = performans kabusu -->
<SatisWidget />     <!-- GET /api/satis -->
<KullaniciWidget /> <!-- GET /api/kullanici -->
<StokWidget />      <!-- GET /api/stok -->
<!-- ... ve 5 tane daha -->
      

// lib/server/dashboard.ts
import { query } from '$lib/server/db';

export async function dashboardVerisiGetir(widgetTipi: string) {
  'use server';
  // query.batch() aynı macrotask içindeki çağrıları toplar
  // Tüm widget'lar için tek bir HTTP isteği gönderilir
  return await query.batch(widgetTipi, async (tipler) => {
    const veriler = await Promise.all(
      tipler.map(tip => db.from('dashboard_data').where({ tip }).select())
    );
    return (tip: string) => veriler.find(v => v.tip === tip);
  });
}
      

Lazy discovery (tembel keşif) iyileştirmesi de bu güncellemeyle geldi. Artık remote fonksiyonlar yalnızca kodunuz gerçekten onlara referans verdiğinde bundle'a (paket) dahil ediliyor. Bu, production build boyutunu belirgin şekilde küçültiyor. Alesta Web ekibinin test ettiği bir projede bundle boyutu yüzde 18 oranında azaldı.

Svelte 5 Runes ile Entegrasyon ($state, $derived, $effect)

Async SSR ve Remote Functions, Svelte 5'in devrimci reaktivite sistemi olan Runes ile birleşince gerçek bir güç ortaya çıkıyor. Alesta Web olarak Runes sistemini Ekim 2024'ten beri aktif olarak kullanıyoruz ve şunu söyleyebiliriz: Svelte 4'ün örtük reaktivitesine geri dönmek mümkün değil.

Runes nedir? En basit tanımıyla: Svelte derleyicisine hangi değişkenlerin reaktif (değişime duyarlı) olduğunu açıkça bildiren işaretçiler. $state, $derived ve $effect üçlüsü, React Hooks'a benzer ama çok daha deterministik (öngörülebilir) bir yapı sunuyor.

<script>
  // $state: Reaktif değişken tanımla
  let sepetAdedi = $state(0);
  let kullaniciAdi = $state('');
  let urunler = $state<Urun[]>([]);

  // Remote Function ile birlikte kullanım
  async function urunEkle(urun: Urun) {
    await sepeteEkle(urun.id, 1); // Remote function
    urunler = [...urunler, urun]; // Reaktif güncelleme
    sepetAdedi++;                  // Otomatik DOM güncellemesi
  }
</script>

<p>Sepetinizde {sepetAdedi} ürün var</p>
      

<script>
  let urunler = $state<Urun[]>([]);
  let indirimOrani = $state(0.1); // %10 indirim

  // $derived: urunler veya indirimOrani değişince otomatik hesaplanır
  // Memoized (önbellekli) — gereksiz hesaplama yok
  let toplamFiyat = $derived(
    urunler.reduce((toplam, u) => toplam + u.fiyat, 0)
  );
  let indirimliFiyat = $derived(toplamFiyat * (1 - indirimOrani));

  // Alesta Web projelerinde kullandığımız gerçek bir pattern
  let sepetOzeti = $derived({
    urunSayisi: urunler.length,
    brut: toplamFiyat,
    indirim: toplamFiyat * indirimOrani,
    net: indirimliFiyat
  });
</script>
      

<script>
  let arama = $state('');
  let sonuclar = $state<Urun[]>([]);

  // $effect: Bağımlılıklar değişince çalışır
  // React useEffect'e benzer ama daha temiz
  $effect(() => {
    if (arama.length < 2) return;

    const timeout = setTimeout(async () => {
      // Remote function ile arama
      sonuclar = await urunAra(arama);
    }, 300);

    // Temizlik fonksiyonu — React'taki return gibi
    return () => clearTimeout(timeout);
  });
</script>

<input bind:value={arama} placeholder="Ürün ara..." />
      

Alesta Web ekibi olarak Runes sistemini React Hooks ile karşılaştırdık. Runes çok daha az sürprizle çalışıyor: Bağımlılık dizisi yok, stale closure (eski kapanış) problemi yok, aşırı render yok. Debugging süreci de çok daha temiz.

Performans Karşılaştırması: React vs SvelteKit 2026 (Performance Benchmarks)

Rakamlar her zaman en iyi açıklayıcıdır. Alesta Web ekibi olarak benzer özelliklere sahip iki proje geliştirdik — biri React 19/Next.js 16 ile, diğeri Svelte 5/SvelteKit 2.43 ile. İşte elde ettiğimiz bulgular:

Bu rakamlar, Alesta Web'in gerçek proje ortamında elde ettiği sonuçları yansıtıyor. Tabii her proje farklıdır; ancak content-heavy (içerik ağırlıklı) ve data-fetching yoğun uygulamalarda SvelteKit'in üstünlüğü net olarak görülüyor.

SvelteKit'in virtual DOM (sanal DOM) kullanmaması ve compile-time optimizasyon yaklaşımı, bu performans farkının temel nedeni. Svelte, bileşenlerinizi tarayıcıya göndermek yerine build aşamasında saf JavaScript'e çeviriyor. Tarayıcıda çalışacak framework runtime (çalışma zamanı kütüphanesi) yok demek, daha az kod, daha az bellek, daha hızlı çalışma.

Güvenlik Güncellemeleri ve Önemli Notlar (Security Updates)

Ocak 2026'da Svelte ekosistemi önemli güvenlik güncellemeleri aldı. Alesta Web uzmanları bu güncellemeleri yakından takip etti ve projelere hemen uyguladı. Beş ayrı güvenlik açığı için yamalar yayımlandı:

• svelte 5.46.4 — Kritik güncelleme, hemen uygulayın
• @sveltejs/kit 2.49.5 — Güvenlik yamaları dahil
• @sveltejs/adapter-node 5.5.1 — Node adapter güncellemesi
• devalue — Serializasyon kütüphanesi güvenlik düzeltmesi

# Mevcut sürümleri kontrol et
npm outdated

# Güvenlik güncellemelerini uygula
npm update svelte @sveltejs/kit @sveltejs/adapter-node

# Belirli sürüme yükselt
npm install svelte@5.46.4 @sveltejs/kit@2.49.5 @sveltejs/adapter-node@5.5.1

# Güvenlik açıklarını kontrol et
npm audit
npm audit fix
      

Şubat 2026 itibarıyla CSS parser artık svelte/compiler'dan parseCss olarak dışa aktarılıyor. Bu, custom build araçları geliştiren ekipler için önemli bir yenilik. Ayrıca <select> elementleri artık CSS ve zengin HTML içerik ile özelleştirilebiliyor — kullanıcı arayüzü tasarımında önemli bir özgürlük.

shadowRoot özelleştirmesi de bu ayın güncellemesinde geldi: attachShadow() çağrısında artık ShadowRootInit nesnesi geçebiliyorsunuz. Web Components (web bileşenleri) geliştiren ekipler için kritik bir özellik.

Kaynaklar ve Referanslar / Sources and References

• Svelte Resmi Blog — What's new in Svelte: February 2026
• Svelte Resmi Blog — What's new in Svelte: January 2026
• SvelteKit Resmi Dokümantasyon — Remote Functions
• GitHub Discussions — Async SSR Tartışması
• Deep Dive: SvelteKit 2.43 Async SSR & Remote Functions Explained
• SvelteKit's Async SSR: What It Means for Developers
• Svelte 5 & SvelteKit: Features, Pros, Cons (2026 Guide)
• React vs Vue vs Svelte vs SolidJS 2025-2026 — FrontendTools
• Svelte 5 Resmi Docs — $state Rune
• Svelte 5 Resmi Docs — $derived Rune
• Svelte 5 Resmi Docs — $effect Rune