Svelte ve SvelteKit ile Hızlı Web Uygulaması Geliştirme

Svelte Nedir ve Neden Tercih Edilmeli?

Modern web geliştirme dünyasında React, Vue ve Angular gibi frameworkler uzun süredir baskın konumdayken, Svelte tamamen farklı bir yaklaşımla sahneye çıktı. Svelte, diğer frameworklerin aksine bir derleyici (compiler) olarak çalışır. Bu ne anlama geliyor? React veya Vue kullandığınızda, tarayıcıya bir runtime (çalışma zamanı kütüphanesi) gönderirsiniz ve bu runtime, sanal DOM karşılaştırmaları yaparak arayüzü günceller. Svelte ise derleme aşamasında tüm bu işi halleder ve tarayıcıya yalnızca optimize edilmiş, sade JavaScript kodu gönderir.

Bu yaklaşımın en büyük avantajları şunlardır:

• Daha küçük paket boyutu: Runtime olmadığı için gönderilen JavaScript miktarı ciddi ölçüde azalır.
• Daha yüksek performans: Sanal DOM karşılaştırması yapılmadığından güncellemeler doğrudan DOM üzerinde gerçekleşir.
• Daha az boilerplate kod: Svelte'in sözdizimi son derece sade ve okunabilirdir.
• Yerleşik reaktivite: Ek bir state yönetim kütüphanesine ihtiyaç duymadan reaktif değişkenler tanımlayabilirsiniz.

SvelteKit: Svelte'in Full-Stack Framework'ü

Svelte tek başına bir bileşen frameworküdür. Ancak gerçek dünyada bir web uygulaması geliştirirken yönlendirme (routing), sunucu tarafı renderlama (SSR), API endpoint'leri ve daha birçok özelliğe ihtiyaç duyarsınız. İşte tam bu noktada SvelteKit devreye girer. SvelteKit, Svelte ekosisteminin resmi uygulama frameworküdür ve Next.js'in React için yaptığını Svelte için yapar.

SvelteKit'in sunduğu temel özellikler:

• Dosya tabanlı yönlendirme (file-based routing): Klasör yapısı otomatik olarak URL yapınızı belirler.
• Sunucu tarafı renderlama (SSR): SEO dostu sayfalar oluşturmanızı sağlar.
• Statik site üretimi (SSG): Derleme zamanında statik HTML dosyaları oluşturabilirsiniz.
• API rotaları: Backend endpoint'lerini doğrudan projeniz içinde tanımlayabilirsiniz.
• Adaptörler: Uygulamanızı Node.js, Vercel, Netlify, Cloudflare Workers gibi farklı platformlara dağıtabilirsiniz.

Proje Oluşturma ve İlk Adımlar

Yeni bir SvelteKit projesi oluşturmak son derece kolaydır. Terminal üzerinden aşağıdaki komutu çalıştırmanız yeterlidir:

npm create svelte@latest my-app
cd my-app
npm install
npm run dev

Bu komutlar size interaktif bir kurulum sihirbazı sunar. TypeScript desteği, ESLint, Prettier ve test araçları gibi seçenekleri projenize dahil edebilirsiniz. Kurulum tamamlandığında localhost:5173 adresinde çalışan bir geliştirme sunucunuz hazır olacaktır.

Svelte Bileşen Yapısı

Svelte bileşenleri .svelte uzantılı dosyalardır ve üç temel bölümden oluşur: script, stil ve şablon. Bu yapı, Vue'nun tek dosya bileşenlerine benzer ancak çok daha sadedir.

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

  function increment() {
    count++;
  }

  let doubled = $derived(count * 2);
</script>

<main>
  <h1>Sayaç: {count}</h1>
  <p>İki katı: {doubled}</p>
  <button onclick={increment}>Artır</button>
</main>

<style>
  main {
    text-align: center;
    padding: 2rem;
  }

  button {
    background-color: #ff3e00;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
  }

  button:hover {
    background-color: #cc3200;
  }
</style>

Dikkat ederseniz, React'teki useState hook'u yerine Svelte 5 ile gelen runes sistemini kullanıyoruz. $state ile reaktif bir değişken, $derived ile türetilmiş bir değer tanımlıyoruz. Ayrıca stil tanımları bileşen kapsamlıdır; yani bu stillerin başka bileşenleri etkileme riski yoktur.

SvelteKit'te Yönlendirme ve Sayfa Yapısı

SvelteKit'te yönlendirme tamamen dosya sistemi üzerinden yönetilir. src/routes klasörü altındaki her klasör bir rota oluşturur.

src/routes/
├── +page.svelte          → /
├── +layout.svelte        → Tüm sayfalarda ortak düzen
├── about/
│   └── +page.svelte      → /about
├── blog/
│   ├── +page.svelte      → /blog
│   ├── +page.server.js   → /blog için sunucu tarafı veri yükleme
│   └── [slug]/
│       ├── +page.svelte  → /blog/herhangi-bir-yazi
│       └── +page.server.js

Dinamik rotalar köşeli parantezlerle tanımlanır. Örneğin [slug] klasörü, URL'deki dinamik parametreyi yakalar. Bir blog sayfası için veri yükleme işlemi şu şekilde yapılabilir:

// src/routes/blog/[slug]/+page.server.js
export async function load({ params }) {
  const { slug } = params;

  const response = await fetch(`https://api.example.com/posts/${slug}`);
  const post = await response.json();

  if (!post) {
    throw error(404, 'Yazı bulunamadı');
  }

  return {
    post
  };
}

Ardından bu veriyi sayfa bileşeninde kullanabilirsiniz:

<script>
  let { data } = $props();
</script>

<article>
  <h1>{data.post.title}</h1>
  <div>{@html data.post.content}</div>
</article>

Form İşleme ve Sunucu Aksiyonları

SvelteKit'in en güçlü özelliklerinden biri form actions mekanizmasıdır. Bu mekanizma sayesinde JavaScript devre dışı olsa bile formlarınız çalışır ve progresif geliştirme (progressive enhancement) ilkesine uygun uygulamalar geliştirebilirsiniz.

// src/routes/contact/+page.server.js
import { fail } from '@sveltejs/kit';

export const actions = {
  default: async ({ request }) => {
    const formData = await request.formData();
    const name = formData.get('name');
    const email = formData.get('email');
    const message = formData.get('message');

    if (!name || !email || !message) {
      return fail(400, {
        error: 'Tüm alanlar zorunludur.',
        values: { name, email, message }
      });
    }

    // Veritabanına kaydet veya e-posta gönder
    await saveContact({ name, email, message });

    return { success: true };
  }
};

<script>
  import { enhance } from '$app/forms';

  let { form } = $props();
</script>

<form method="POST" use:enhance>
  {#if form?.error}
    <p class="error">{form.error}</p>
  {/if}

  {#if form?.success}
    <p class="success">Mesajınız başarıyla gönderildi!</p>
  {/if}

  <label>
    Ad Soyad
    <input name="name" value={form?.values?.name ?? ''} />
  </label>

  <label>
    E-posta
    <input name="email" type="email" value={form?.values?.email ?? ''} />
  </label>

  <label>
    Mesaj
    <textarea name="message">{form?.values?.message ?? ''}</textarea>
  </label>

  <button type="submit">Gönder</button>
</form>

use:enhance direktifi, formu JavaScript ile güçlendirir. Sayfa yeniden yüklenmeden form gönderimi yapılır, ancak JavaScript devre dışıysa standart form gönderimi devreye girer.

API Endpoint'leri Oluşturma

SvelteKit ile REST API endpoint'leri oluşturmak oldukça basittir. +server.js dosyaları bu amaçla kullanılır:

// src/routes/api/users/+server.js
import { json } from '@sveltejs/kit';

export async function GET() {
  const users = await db.getUsers();
  return json(users);
}

export async function POST({ request }) {
  const { name, email } = await request.json();

  const user = await db.createUser({ name, email });

  return json(user, { status: 201 });
}

Bu endpoint'lere /api/users URL'i üzerinden erişebilirsiniz. HTTP metodlarına göre farklı fonksiyonlar tanımlayarak RESTful bir API tasarlayabilirsiniz.

Performans Optimizasyonu ve En İyi Pratikler

SvelteKit zaten oldukça performanslı bir framework olsa da, uygulamanızı daha da hızlandırmak için şu teknikleri uygulayabilirsiniz:

1. Lazy loading kullanın: Büyük bileşenleri dinamik olarak içe aktarın. Svelte'in yerleşik {#await} bloğu bu konuda çok faydalıdır.
2. Görselleri optimize edin: @sveltejs/enhanced-img paketini kullanarak görselleri otomatik olarak optimize edebilirsiniz.
3. Prerendering kullanın: Statik sayfalar için export const prerender = true; ifadesini ekleyerek derleme zamanında HTML oluşturun.
4. Streaming SSR'dan yararlanın: SvelteKit, sunucu tarafı renderlamada streaming desteği sunar. Böylece sayfa yüklenirken kullanıcı ilk içeriği daha hızlı görür.
5. Veri önbellekleme: +page.server.js dosyalarında setHeaders ile uygun cache başlıkları ayarlayın.

// Prerendering örneği
// src/routes/about/+page.js
export const prerender = true;

// Önbellekleme örneği
// src/routes/blog/+page.server.js
export async function load({ setHeaders }) {
  setHeaders({
    'cache-control': 'public, max-age=3600'
  });

  const posts = await getPosts();
  return { posts };
}

Dağıtım (Deployment)

SvelteKit'in adaptör sistemi, uygulamanızı farklı platformlara kolayca dağıtmanızı sağlar. En popüler adaptörler şunlardır:

• @sveltejs/adapter-auto — Dağıtım ortamını otomatik algılar
• @sveltejs/adapter-node — Node.js sunucuları için
• @sveltejs/adapter-static — Tamamen statik siteler için
• @sveltejs/adapter-vercel — Vercel platformu için
• @sveltejs/adapter-cloudflare — Cloudflare Workers/Pages için

// svelte.config.js
import adapter from '@sveltejs/adapter-node';

export default {
  kit: {
    adapter: adapter({
      out: 'build'
    })
  }
};

Dağıtım işlemi genellikle şu kadar basittir:

npm run build
node build

Sonuç

Svelte ve SvelteKit, modern web geliştirme dünyasında giderek daha fazla benimsenen, performans odaklı ve geliştirici deneyimini ön planda tutan araçlardır. Derleyici tabanlı yaklaşımı sayesinde daha küçük paket boyutları ve daha hızlı çalışma zamanı performansı sunar. SvelteKit ise dosya tabanlı yönlendirme, SSR, form aksiyonları ve API rotaları gibi özellikleriyle tam teşekküllü bir full-stack framework deneyimi sağlar.

Eğer yeni bir projeye başlıyorsanız veya mevcut teknoloji yığınınızı değerlendiriyorsanız, Svelte ve SvelteKit'i kesinlikle denemenizi öneririm. Özellikle performansın kritik olduğu projelerde, az sayıda bağımlılıkla hızlı ve hafif uygulamalar geliştirmek istiyorsanız, bu ikili sizin için mükemmel bir seçim olacaktır.