React Tutorial 2023 9 – Single Page Application’ı Anlamak

Merhabalar.

Bu yazımda React geliştirmeye geçmeden anlamamız gereken bir kavram daha kaldı ondan bahsedeceğim.

React kullanımıyla birlikte, geleneksel web uygulamalarından farklı olarak Single Page Application (SPA) kavramı hayatımıza girdi. Önceden, her sayfa için ayrı bir HTML dosyası oluştururduk. Bir bağlantıya tıkladığımızda, tarayıcı yeni bir HTML belgesi isteyerek sayfayı yenilerdi.

Ancak React ile bu yaklaşım değişti. Artık tüm uygulamayı tek bir sayfa üzerinde yönetiyoruz. İsteklere yanıt olarak, sadece ilgili bileşenleri gösterip gizleyerek sayfa içeriğini güncelliyoruz. Bu şekilde, sayfa yenilenme ihtiyacını ortadan kaldırdık. Sadece ilgili bileşenler güncellendiği için sayfa tepkimeleri daha hızlı ve verimli hale geldi. Yani, React SPA mimarisi sayesinde sayfalar arası geçişler daha hızlı ve kullanıcı dostu bir deneyim sunuyor.

Şimdi yukarda örneğiyle anlattığım bu konunun daha teknik anlatımına göz atalım.

Tek sayfa uygulamaları (SPA’lar), web uygulamalarının tek bir sayfa üzerinde çalıştığı ve içeriğin dinamik olarak değiştiği tasarım modelleridir. Bu yaklaşım, kullanıcıların sayfa yenileme ihtiyacını ortadan kaldırarak daha akıcı ve hızlı bir kullanıcı deneyimi sunar.

SPA’nın Temel Bileşenleri:

1. Tek Sayfa Yükleme: SPA’nın ana özelliği, sadece başlangıçta bir HTML, CSS ve JavaScript dosyasının yüklenmesidir. Ardından, sayfa içeriği dinamik olarak değiştirilir.
2. Router: SPA’lar genellikle bir yönlendirme sistemi kullanır. Kullanıcı farklı sayfalara geçtiğinde URL değişir, ancak sayfa tamamen yeniden yüklenmez. Bu, tarayıcı geçmişini daha etkili bir şekilde kullanmayı sağlar.
3. AJAX (Asenkron İstekler): Sayfa içeriğini değiştirmek için sunucu ile iletişim genellikle AJAX kullanılarak gerçekleştirilir. Bu, sayfanın yeniden yüklenmeden veri alışverişi yapılmasını sağlar.
4. Component Tabanlı Tasarım: SPA’lar genellikle bileşenlere dayalı bir tasarım kullanır. Her bir bileşen, kendi içeriği, stilini ve davranışlarını kontrol eden bağımsız bir modüldür.

Örnek Bir SPA Uygulaması:

Bir örnek üzerinden gidelim. Örneğin, basit bir alışveriş uygulaması olabilir:

1. Anasayfa: İlk yüklendiğinde ana sayfa görüntülenir. Bu sayfa, ürün kategorilerini ve popüler ürünleri gösterir.
2. Ürün Sayfası: Kullanıcı bir kategoriye tıkladığında veya belirli bir ürünü seçtiğinde, sayfa yeniden yüklenmeden sadece ürünlerin listesi değişir.
3. Sepet: Kullanıcı sepete bir şey eklediğinde, sepetteki ürün sayısı hemen güncellenir. Sepet sayfasına gitmek için sayfa yeniden yüklenmez, sadece içerik değişir.
4. Ödeme Sayfası: Kullanıcı ödeme yapmak istediğinde, sayfa tekrar yeniden yüklenmez, sadece ödeme formu görüntülenir.

Bu şekilde, kullanıcılar sayfalar arasında hızlıca geçiş yapabilir ve uygulama daha hızlı ve akıcı bir deneyim sunar.

Single Page Application kavramını anladıysanız bir sonraki yazımda görüşmek üzere.