Yan yana

SPAvsMPA

SPA ile MPA arasındaki fark nedir?

Güncellendi 6 Ekim 20263 dk okuma8 fark

Kısaca

SPA tek sayfa yükler ve siz gezindikçe onu JavaScript ile yeniden çizer; MPA ise her bağlantı ya da form gönderiminde sunucudan yeni bir HTML sayfası yükler.

Web Geliştirmes. 52

SPA

Tek Sayfalı Uygulama

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 sayfasını oku

Web Geliştirmes. 37

MPA

Çok Sayfalı Uygulama

MPA, her bağlantının ya da form gönderiminin sunucudan yeni bir HTML sayfası yüklediği web sitesi ya da uygulamasıdır; web'in klasik çalışma biçimidir.

MPA sayfasını oku

SPA ve MPA karşılaştırması

Özellik	SPA	MPA
Gezinme	Sayfayı JavaScript yeniden çizer; tam yenileme olmaz	Tarayıcı sunucudan yeni bir HTML belgesi yükler
İlk yükleme	Daha yavaş: JavaScript paketi inip çalışmalı	Hızlı: sunucu hazır HTML gönderir
Görünümler arası geçiş	Hızlı ve akıcı; yalnızca veri çekilir	Tam sayfa yüklemesi; view transition'lar ve önbellek bunu yumuşatır
Sayfalar arası durum	Bellekte korunur; örneğin oynayan bir video ya da bir taslak	Saklanmadıkça ya da sunucuya gönderilmedikçe her yüklemede kaybolur
SEO	Güvenilir olması için sunucu tarafı render ya da önceden render gerekir	Basit: her sayfa kendi URL'iyle eksiksiz HTML'dir
JavaScript olmadan	Genellikle boş bir kabuk gösterir	Sayfalar, bağlantılar ve formlar yine çalışır
Tipik araçlar	İstemci tarafı bir yönlendiriciyle React, Vue, Angular ya da Svelte	WordPress, Django, Rails, Laravel, Astro
En uygun olduğu yer	Tek ekranda uzun oturumlar: editörler, paneller, e-posta istemcileri	İçerik siteleri, mağazalar, dokümantasyon, formlar

Fark, açıklamalı

Çok sayfalı uygulama (MPA), web'in klasik modelidir: her sayfa kendi HTML belgesidir ve her bağlantı ya da form gönderimi, tarayıcının sunucudan yeni bir sayfa isteyip eskisinin yerine koymasına yol açar. Tek sayfalı uygulama (SPA) ise bir HTML kabuğunu ve bir JavaScript paketini bir kez yükler; ardından istemci tarafı yönlendirme URL'yi History API ile değiştirir, veriyi genellikle JSON olarak çeker ve sayfanın yalnızca değişen bölümünü yeniden çizer.

Fark, gezinmenin nerede gerçekleştiğidir ve ödünleşimleri de bu belirler. MPA modelinde sayfalar gerçek URL'leriyle eksiksiz HTML olarak gelir; bu yüzden hızlı görünür, JavaScript olmadan çalışır, arama motorlarınca kolayca okunur ve kolayca önbelleğe alınır. Bedeli her gezinmedeki tam sayfa yenilemedir; bu da yalnızca sayfanın belleğinde tutulan her şeyi kaybettirir. Bir SPA ise yüklendikten sonra akıcı hissettirir ve oynayan bir video ya da yarım yazılmış bir mesaj gibi durumları görünümler arasında korur; ama ilk yükleme büyük bir paketi bekler ve SEO için sunucu tarafı render ya da önceden render (prerendering) gerekir.

Çizgi iki taraftan da bulanıklaştı. Next.js, Nuxt ve SvelteKit gibi framework'ler ilk sayfayı bir MPA gibi sunucuda render eder, ardından bir SPA gibi gezinir; Astro ise küçük etkileşimli adacıklar (islands) içeren çok sayfalı siteler kurar. Tarayıcılar da MPA modelinin açığını daralttı: belgeler arası view transition'lar sayfalar arasındaki geçişi canlandırır, back/forward cache son sayfaları anında geri getirir, htmx ve Turbo gibi kütüphaneler de sunucudan gelen taze HTML'i tam sayfa yenilemesi olmadan yerine koyar.

Sık yapılan bir yanlış, SPA modelinin her zaman daha hızlı olduğu düşüncesidir. Görünümler arasında daha hızlıdır, ama ilk içeriği göstermesi genellikle daha yavaştır; bloglar, mağazalar ve dokümantasyon gibi pek çok site de zaten sayfa sayfa okunur. Bir başkası, MPA denince statik sayfaların anlaşılmasıdır; oysa sayfaların HTML'i her istekte üretilip her kullanıcıya göre kişiselleştirilebilir.

Hangisini kullanmalısınız?

SPA şu durumlarda doğru seçim:

Kullanıcılar uzun oturumlar boyunca kalıyor ve bir panelde ya da editörde olduğu gibi birçok görünüm arasında geziniyor.
Durum gezinme boyunca korunmalı; örneğin çalan bir parça ya da gönderilmemiş bir mesaj.
Uygulama bir oturum açma (login) ekranının arkasında duruyor, bu yüzden arama motorlarının onu okuması gerekmiyor.
Etkileşimler, sayfa yenilenmeden yerel (native) bir uygulama gibi hissettirmeli.

MPA şu durumlarda doğru seçim:

Ziyaretçilerin çoğu, bir blogda, mağazada ya da dokümantasyon sitesinde olduğu gibi bir iki sayfa okuyor.
Arama görünürlüğü ve hızlı bir ilk görünüm her şeyden önemli.
Sayfalar JavaScript olmadan ya da yavaş cihazlarda da çalışmalı.
Basit bir sunucu kodu, önbellekleme ve barındırma istiyorsunuz.

Tarayıcıda ya da sunucuda kurulan bir ürün sayfası (Node.js ve Express)

SPAjavascript

// SPA: the server sends data; JavaScript in the browser builds the view
app.get("/api/products/:id", async (req, res) => {
  res.json(await db.products.find(req.params.id));
});

// In the browser, a link click fetches JSON and redraws without a reload
async function showProduct(id) {
  history.pushState({}, "", `/products/${id}`);
  const product = await (await fetch(`/api/products/${id}`)).json();
  document.querySelector("main").replaceChildren(ProductView(product));
}

MPAjavascript

// MPA: the server renders a complete HTML page for every URL
app.get("/products/:id", async (req, res) => {
  const product = await db.products.find(req.params.id);
  res.render("product", { product }); // a template fills in the whole page
});

// In the template, a plain link asks the server for the next page:
// <a href="/products/{{ product.nextId }}">Next product</a>

Sık sorulan sorular

SPA mı daha iyi, MPA mı?

Genel olarak hiçbiri daha iyi değildir. SPA modeli, kullanıcıların tek ekranda kalıp yoğun etkileşimde bulunduğu uygulamalara uyar; MPA modeli ise insanların aramayla bulup sayfa sayfa okuduğu içeriğe uyar. Hibrit framework'ler bir sitenin ikisini birlikte kullanmasını sağlar.

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

Mutlaka değil; ama neredeyse boş bir HTML kabuğu gönderen bir SPA, tarama botlarının (crawler) JavaScript'ini çalıştırmasına güvenir ve hepsi bunu yapmaz. İlk görünümü sunucuda ya da derleme sırasında render etmek, arama motorlarına ve yapay zekâ botlarına içeriğin tamamını verir.

Next.js bir SPA mı, MPA mı?

Bir bakıma ikisi de. Her sayfayı bir MPA gibi sunucuda ya da derleme sırasında render eder, böylece ilk görünüm HTML olarak gelir; sonraki gezinmeleri ise bir SPA gibi tarayıcıda yönetir.