SvelteKit 2: Kod Tabanlı Router Oluşturma

SvelteKit 2: Kod Tabanlı Router Oluşturma

SvelteKit’in dosya tabanlı yönlendirmesi oldukça kullanışlı olsa da, büyük ve karmaşık uygulamalar için kod tabanlı bir yönlendirme çözümü daha esnek ve sürdürülebilir olabilir. Bu makalede, SvelteKit 2’de dosya tabanlı yönlendirmeden kod tabanlı bir yönlendirmeye nasıl geçiş yapacağınızı adım adım öğreneceksiniz. Karmaşık rota yönetimini basitleştirecek ve kodunuzun ölçeklenebilirliğini artıracak bu yönteme derinlemesine dalacağız.

SvelteKit’te Yönlendirme Temelleri: Dosya Tabanlı vs. Kod Tabanlı

SvelteKit’in varsayılan yönlendirme sistemi, dosya sistemini kullanır. Yani, src/routes dizinindeki dosyalar otomatik olarak rotalar olarak tanımlanır. Bu basit uygulamalar için idealdir, ancak uygulama büyüdükçe, dosya yapısı karmaşıklaşır ve yönetimi zorlaşır. Bu noktada kod tabanlı bir yönlendirme, daha fazla düzen ve kontrol sağlar. Kod tabanlı yönlendirme, rotaları doğrudan kod içinde tanımlamanıza olanak tanır, bu da daha dinamik ve programlanabilir bir yönlendirme sistemi kurmanızı mümkün kılar. Örneğin, bir e-ticaret uygulamasında dinamik ürün sayfaları oluşturmak için veya yetkilendirme mantığını yönlendirme sistemine entegre etmek için kod tabanlı yönlendirme son derece faydalıdır. Dosya tabanlı sistemde bu tür dinamik rotaları oluşturmak oldukça zahmetlidir.

SvelteKit’te Kod Tabanlı Yönlendirme Nasıl Yapılır?

SvelteKit’te kod tabanlı yönlendirme, +page.js veya +page.server.js dosyalarında load fonksiyonunu kullanarak gerçekleştirilir. load fonksiyonu, bir rotada sunucudan veri çekmek veya yönlendirme mantığını uygulamak için ideal bir yerdir. Bu fonksiyon bir redirect nesnesi döndürerek kullanıcının başka bir sayfaya yönlendirilmesini sağlayabilir.

Basit Bir Kod Tabanlı Yönlendirme Örneği

Aşağıdaki örnekte, / rotasından /about rotasına bir yönlendirme yapıyoruz:

// src/routes/+page.server.js

export const load = async ({ fetch, params }) => {
  return {
    redirect: '/about'
  };
};

Bu kod, / rotasına erişen bir kullanıcının otomatik olarak /about rotasına yönlendirilmesini sağlar. Bu basit örnek, kod tabanlı yönlendirinin temel mantığını gösterir. Daha karmaşık senaryolar için, yönlendirme kararını verilerin veya kullanıcı durumunun etkilemesine izin verebilirsiniz. Örneğin, oturum açmamış bir kullanıcının giriş sayfasına yönlendirilmesini sağlayabilirsiniz.

Dinamik Rotalar ve Kod Tabanlı Yönlendirme

Dinamik rotalar, URL'lerde değişken değerler içeren rotalardır. Örneğin, bir blog uygulamasında her bir blog yazısının kendi URL'sine sahip olması için dinamik rotalar kullanılır. Kod tabanlı yönlendirme, bu dinamik rotaları yönetmek için çok güçlü bir araçtır. params nesnesi, URL'deki dinamik segmentleri tutar ve bu segmentleri kullanarak farklı yönlendirme kararları alabilirsiniz.

Dinamik Rotalar İçin Kod Tabanlı Yönlendirme Örneği

Şimdi, bir blog uygulamasında blog gönderilerinin ID'sini kullanarak dinamik bir yönlendirme örneği ele alalım. Varsayalım ki, /blog/[id] rotasında, belirli bir blog gönderisinin detaylarını görüntülemek istiyoruz. Ancak, bazı gönderiler silindiyse, kullanıcıları farklı bir sayfaya yönlendirmek isteyebiliriz.

// src/routes/blog/[id]/+page.server.js

export const load = async ({ fetch, params }) => {
  const postId = params.id;
  const response = await fetch(/api/posts/${postId});

  if (!response.ok) {
    return {
      redirect: '/blog/not-found'
    };
  }

  const post = await response.json();
  return { post };
};

Bu örnekte, load fonksiyonu öncelikle belirli bir blog gönderisi için API'den veri çeker. Eğer gönderi bulunmazsa (response.ok false ise), kullanıcı /blog/not-found rotasına yönlendirilir. Bu, kullanıcı deneyimini iyileştirir ve kırık bağlantıları önler. Bu örnekte, /api/posts/${postId} gibi bir API endpoint'ine ihtiyaç duyduğumuzu belirtmek önemlidir. Bu API, blog gönderisi verilerini sağlamalıdır.

Yetkilendirme ve Kod Tabanlı Yönlendirme

Kod tabanlı yönlendirme, yetkilendirme mantığını uygulamada önemli rol oynar. Kullanıcının belirli bir sayfayı görüntülemek için gerekli izinlere sahip olup olmadığını kontrol edebilir ve yetkisiz kullanıcıları giriş sayfasına veya hata sayfasına yönlendirebilirsiniz.

Yetkilendirme Örneği

Aşağıdaki örnekte, /admin rotasına erişimi sadece oturum açmış ve yönetici rolüne sahip kullanıcılarla sınırlandırıyoruz:

// src/routes/admin/+page.server.js

export const load = async ({ fetch, session }) => {
  if (!session.user || session.user.role !== 'admin') {
    return {
      redirect: '/login'
    };
  }

  // Yönetici panosu için verileri burada alın
  // ...
};

Bu örnekte, session nesnesi kullanıcının oturum bilgilerini içerir. Eğer kullanıcı oturum açmamışsa veya yönetici rolüne sahip değilse, /login rotasına yönlendirilir. Bu örnek, SvelteKit'in yerleşik oturum yönetimi özelliğini varsayar. Daha gelişmiş bir yetkilendirme sistemine ihtiyacınız varsa, bir üçüncü taraf kütüphanesi veya kendi özel yetkilendirme çözümünüzü kullanabilirsiniz. Bu çözümün güvenliği için gerekli önlemlerin alınması oldukça önemlidir.

Karmaşık Senaryolar ve İleri Düzey Teknikler

Karmaşık senaryolarda, birden fazla yönlendirme koşulu ve dinamik URL parametreleri ile çalışmanız gerekebilir. Bu durumda, şartlı ifadeler ve fonksiyonel programlama tekniklerini kullanarak yönlendirme mantığınızı daha okunabilir ve sürdürülebilir hale getirebilirsiniz.

Fonksiyonel Yaklaşım

Aşağıdaki örnek, fonksiyonel bir yaklaşım kullanarak farklı yönlendirme koşullarını ele almaktadır:

// src/routes/+page.server.js

const handleRedirect = (condition, redirectPath) => {
  if (condition) {
    return { redirect: redirectPath };
  }
  return null;
};

export const load = async ({ fetch, session, params }) => {
  const redirect1 = handleRedirect(!session.user, '/login');
  const redirect2 = handleRedirect(params.id === 'secret', '/error');

  if (redirect1) return redirect1;
  if (redirect2) return redirect2;

  // ... diğer işlemler
};

Bu yaklaşım, kodun okunabilirliğini ve sürdürülebilirliğini önemli ölçüde artırır. Her bir yönlendirme koşulu, ayrı bir fonksiyonda yönetilir ve bu da karmaşıklığı azaltır. Ayrıca, bu yöntemi daha büyük ve daha karmaşık uygulamalar için genişletebilirsiniz.

Performans Optimizasyonu

Kod tabanlı yönlendirme, performans üzerinde olumsuz bir etkiye sahip olabilir, özellikle karmaşık yönlendirme mantığı kullanıyorsanız. Performansı optimize etmek için aşağıdaki önerileri dikkate alın:

• Gereksiz API çağrılarından kaçının.
• Verileri önbelleğe alın.
• Yönlendirme mantığını optimize edin, gereksiz kontrol ifadelerini azaltın.
• Karmaşık işlemleri arka plan iş parçacıklarında çalıştırın (örneğin, Promise.all ile birden fazla API çağrısını paralel hale getirin).

Güvenlik Uyarıları

Öğrenme Yol Haritası

SvelteKit'te kod tabanlı yönlendirmeyi öğrenmek için aşağıdaki yol haritasını takip edebilirsiniz:

Yeni Başlayanlar

• SvelteKit'in temel yönlendirme sistemini öğrenin (dosya tabanlı).
• +page.js ve +page.server.js dosyalarını anlayın.
• load fonksiyonunu kullanarak basit yönlendirmeler yapın.

Orta Seviye

• Dinamik rotaları ve params nesnesini kullanın.
• API çağrıları ile birleştirerek dinamik yönlendirmeler yapın.
• Basit yetkilendirme mekanizmaları uygulayın.

İleri Seviye

• Karmaşık yönlendirme mantığı için fonksiyonel programlama kullanın.
• Performansı optimize edin.
• Güvenlik açıklarını önlemek için önlemler alın.
• Kendi özel yönlendirme çözümlerinizi geliştirin.

Sonuç

SvelteKit 2'de kod tabanlı yönlendirme, büyük ve karmaşık uygulamalar için güçlü ve esnek bir çözümdür. Bu makalede ele aldığımız teknikler, uygulamanızın ölçeklenebilirliğini ve sürdürülebilirliğini artırmanıza yardımcı olacaktır. Ancak, güvenlik önlemlerini göz ardı etmemek önemlidir. Daha fazla bilgi için https://fatihsoysal.com adresini ziyaret edebilirsiniz.

Sıkça Sorulan Sorular

• Soru: Kod tabanlı yönlendirme, dosya tabanlı yönlendirmeye göre daha mı yavaş?
  Cevap: Genellikle değil, ancak karmaşık yönlendirme mantığı performansı etkileyebilir. Optimizasyon gerekli olabilir.
• Soru: Kod tabanlı yönlendirmeyi ne zaman kullanmalıyım?
  Cevap: Uygulamanız büyüdükçe ve karmaşıklaştıkça, özellikle dinamik rotalar veya yetkilendirme gerekli olduğunda.
• Soru: Dosya tabanlı yönlendirmeyle kod tabanlı yönlendirmeyi birleştirebilir miyim?
  Cevap: Evet, her ikisini de bir arada kullanabilirsiniz. İhtiyaca göre farklı yaklaşımları kombinleyebilirsiniz.
• Soru: Hata yönetimi nasıl yapılır kod tabanlı yönlendirmede?
  Cevap: try...catch blokları ve uygun hata mesajları ile hata yönetimi sağlamalısınız. Ayrıca, kullanıcı dostu hata sayfaları oluşturmalısınız.
• Soru: Örneklerde kullanılan API endpoint'leri nasıl oluşturulur?
  Cevap: Bu, uygulamanızın mimarisine bağlıdır. Bir REST API veya GraphQL kullanabilirsiniz. SvelteKit'in fetch fonksiyonu ile API'lere erişebilirsiniz.

Yazar: Fatih Soysal