SPA

Tek Sayfalı Uygulama

Güncellendi 29 Eylül 20262 dk okuma

Kısaca

SPA, tek bir HTML sayfası yükleyip içeriği JavaScript ile güncelleyen ve görünümler arası geçişte sayfayı yeniden yüklemeyen web uygulamasıdır.

SPA nedir?

Tek sayfalı uygulama (single-page application), en başta tek bir HTML kabuğunu ve bir JavaScript paketini (bundle) yükler. Sonrasında kullanıcı bir bağlantıya tıkladığında ya da bir form gönderdiğinde JavaScript yalnızca ihtiyaç duyduğu veriyi, genellikle bir API'den JSON olarak çeker ve sunucudan yepyeni bir belge istemek yerine sayfanın bir bölümünü yeniden çizer.

Bunun normal gezinme gibi hissettirmesi için SPA'ler istemci tarafı yönlendirme (client-side routing) kullanır: tam sayfa yüklemesi olmasa bile tarayıcının History API'si URL'yi değiştirir ve geri düğmesi çalışmaya devam eder. SPA geliştirmek için genellikle React, Vue, Angular ve Svelte gibi kütüphaneler ile framework'ler kullanılır.

Geleneksel bir web sitesini her seferinde yeni bir basılı sayfaya geçmek, SPA'yi ise yalnızca değişen kısmın silinip yeniden çizildiği bir beyaz tahtaya benzetebilirsiniz. Bu sayede e-posta istemcileri, panolar ve tasarım araçları gibi uygulamalar yüklendikten sonra hızlı ve akıcı hissettirir.

Bedeli, ilk yüklemenin daha yavaş olmasıdır; çünkü faydalı bir şey görünmeden önce çok miktarda JavaScript'in indirilip çalıştırılması gerekir. Ayrıca arama motorları veya yapay zekâ tarayıcıları yalnızca boş bir kabuk görüyorsa SEO da zayıflar. Bu yüzden birçok modern framework, ilk görünüm için SPA tarzı gezinmeyi sunucu tarafı işleme (SSR) veya statik üretimle birleştirir. Karşıt model, her gezinmenin sunucudan yeni bir HTML sayfası yüklediği çok sayfalı uygulamadır (MPA).

Önemli noktalar

SPA, tek bir HTML sayfası yükler ve onu JavaScript ile günceller.
Gezinme, tam sayfa yenilemesi olmadan tarayıcıda yönetilir.
Veri genellikle bir API'den JSON olarak gelir.
İlk yükleme yavaş olabilir ve SEO için ekstra özen gerekir.
Bu sorunları gidermek için SPA'lerle sıklıkla SSR ya da statik üretim birlikte kullanılır.

Örnek

Sayfa yenilenmeden istemci tarafı gezinmejavascript

// Intercept clicks on in-app links instead of reloading
document.addEventListener("click", async (event) => {
  const link = event.target.closest("a[data-spa]");
  if (!link) return;
  event.preventDefault();

  // Change the URL without a full page load
  history.pushState({}, "", link.href);

  // Fetch only the data and redraw part of the page
  const res = await fetch(`/api/pages${link.pathname}`);
  const page = await res.json();
  document.querySelector("h1").textContent = page.title;
});

Sık sorulan sorular

SPA ile MPA arasındaki fark nedir?

MPA'da (çok sayfalı uygulama) her bağlantı sunucudan yeni bir HTML belgesi yükler. SPA'de ise sayfa bir kez yüklenir ve sonraki gezinmelerde içeriği JavaScript günceller.

SPA'ler SEO için kötü müdür?

Sunucu neredeyse boş bir HTML sayfası gönderip içeriği göstermeyi JavaScript'e bırakıyorsa kötü olabilirler. İlk HTML'i sunucuda ya da derleme sırasında üretmek bu sorunların çoğunu çözer.

React bir SPA midir?

React, kendi başına bir SPA değil, kullanıcı arayüzleri geliştirmeye yarayan bir kütüphanedir. Çoğunlukla SPA geliştirmek için kullanılır ama Next.js gibi framework'ler aracılığıyla sayfaları sunucuda da işleyebilir.

İlgili sayfalar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin