İçeriğe geç
Muhammet Şafak
en

3 Ekim 2026

Laravel'de arayüz ölçeği: Blade'den SPA'ya

Blade, Alpine.js, Livewire, Inertia.js ve SPA: Laravel projesinde arayüz aracını etkileşim yoğunluğuna, SEO ihtiyacına ve ekibe göre seçmek.

Tan, elinde bir planla

Laravel · Arayüz

Laravel'de arayüz ölçeği: Blade'den SPA'ya

Her basamak farklı bir ihtiyaca cevap verir. Seçimi araç kalitesi değil, etkileşim yoğunluğu, görünürlük gereksinimi ve ekip belirler.

Muhammet Şafak

Kaynakların tarihi

Bu görsel 2020-2021 yazılarına dayanır

  • Tarih Kaynak yazılar 2020 ve 2021'de yazıldı. Görselde sürüme bağlı ayrıntı yok; karar mantığı aktarıldı.

Alpine ile Vue arasındaki fark

Fark araç kalitesi değil, ölçek.

“Her şey için SPA” başlangıç noktası olunca trade-off'lar görünmez oluyor. Projenin görünürlük gereksinimi de mimari kararın bir parçası.

Basamaklar

Blade'den SPA'ya beş ölçek

  1. Blade Bilinen yol: şablon sunucuda render edilir.
  2. Alpine.js Şablonda birkaç bağımsız etkileşim: dropdown, accordion, koşullu form alanı.
  3. Livewire Form ağırlıklı panel; her etkileşim sunucuya bir istek, DOM farkları uygulanır.
  4. Inertia.js Monolit kalır, arayüz Vue ya da React; API yazılmaz, tek istemci.
  5. SPA + API Ayrı kod tabanı; API'yi mobil ya da üçüncü taraf istemci de tüketir.

Karar haritası

Etkileşim yoğunluğu ve arama görünürlüğü

Dikey eksen sayfanın arama motorundan bulunma ihtiyacını, yatay eksen istemci tarafındaki etkileşim yoğunluğunu gösterir.

İçerik oturum arkasında ↔ SEO gerekli

  • Blade + Alpine.js

    Sunucuda render

    • HTML sunucudan tam gelir
    • Birkaç bağımsız etkileşime Alpine yeter

  • SSR, SSG ya da ISR

    Next.js, Nuxt.js

    • İçerik yoğun yeni proje: SSG ya da ISR
    • Bot tam içeriği ilk yüklemede görür

  • Livewire

    Yönetim paneli

    • Filtreleme, sayfalama, form adımları
    • Sunucu round-trip'i kabul edilebilir

  • Inertia.js ya da SPA

    Oturum arkası

    • İçerik oturum arkasındaysa SEO gerçek bir sorun değil
    • Tek istemci: Inertia; birden çok istemci: ayrı API

Az etkileşim ↔ Yoğun etkileşim

Aynı yıl iki projede

Livewire ve Inertia.js

Konu Livewire Inertia.js
Kimin için Backend odaklı ekip; JavaScript minimum Frontend geliştiricisinin sahada olduğu ekip
Arayüz PHP sınıfı ve Blade görünümü Vue ya da React sayfa bileşeni
Uygun proje Form ağırlıklı yönetim paneli Karmaşık istemci tarafı etkileşim
Sınır Her etkileşim bir HTTP isteği; yüksek frekansta gecikme fark edilir Sunucu ve istemci sıkı bağlı; frontend bağımsız evrilemez

Inertia.js nasıl çalışır

API'siz SPA hissi

  1. Bağlantıya tıkla Inertia sayfa geçişini yakalar.
  2. Controller Inertia::render() sayfa bileşenini ve verisini döner.
  3. JSON yanıt Bileşen adı ve props gelir; paylaşılan veri her yanıta eklenir.
  4. Yerinde güncelleme Tam sayfa yenilenmez, bileşen yerinde güncellenir.

SPA'da arama görünürlüğü

Dört seçenek

Seçenek Nasıl çalışır Kazanç ve bedel
SSR Her istekte HTML sunucuda üretilir Bot tam içeriği ilk yüklemede görür; sunucu kaynağı tüketir, Node.js sunucusu gerekir
SSG Tüm sayfalar build zamanında üretilir CDN'den sunulur, çok hızlı; build süresi uzar, dinamik içerikte sınırlı
ISR Statik üretilir, belirli aralıkta arka planda yenilenir SSG'nin build süresini ve SSR'nin sunucu yükünü dengeler
Prerender Botlara önceden oluşturulmuş HTML, kullanıcıya SPA Dönüşüm maliyeti düşük; ek bağımlılık, içerik senkron kalmayabilir

Doğru görev eşleşmesi

Alpine.js ve Livewire'ı ölçeğinde kullanmak

Yap

  • Alpine'ı şablondaki küçük, bağımsız etkileşimlere ayır
  • Modal'ı Alpine anında açsın, Livewire veriye arka planda erişsin
  • Form alanlarında wire:model.lazy ile her tuşa istek atma
  • Büyüyen x-data mantığını ayrı bir component dosyasına taşı

Yapma

  • Sayfalar arası durumu ve karmaşık bileşen iletişimini Alpine'a yükleme
  • Anlık arama, sürükle-bırak ve animasyonu sunucu round-trip'ine bırakma
  • Şablona iş mantığı sızdırma
  • Karmaşık istemci durumunu Livewire'dan bekleme
Tan, eli çenesinde düşünürken

Seçmeden önce

Karar soruları

  • Sayfalar oturum açmadan erişilip arama motorundan mı bulunuyor?
  • Etkileşim yoğun mu, kullanıcı milisaniye hassasiyeti mi bekliyor?
  • Ekipte Vue ya da React yazabilecek biri var mı?
  • API'yi web arayüzünden başka bir istemci de tüketecek mi?

SPA ve kimlik doğrulama

Çerez mi, token mı?

  • İpucu Aynı kök domain (same-site) üzerindeki SPA için çerez tabanlı oturum daha temiz; token saklama ve yenileme derdi kalkar.
  • Uyarı localStorage XSS saldırılarına açıktır; token'ı orada saklamayın.
  • Not SPA ve API farklı subdomain'lerde olabilir, farklı ana domain'lerde olamaz. Bu sınırın dışında token modeline geçilir.
  • Tuzak Subdomain kullanıyorsanız çerez domain'i baştaki noktayla (.example.com) ayarlanmalı; aksi hâlde çerez yalnız bir subdomain'e gider.

Dayandığı yazılar

Paylaş ve indir

Paylaş:
Bu kodu sayfanızın HTML’ine yapıştırın.

İndir

Sitede Ara

Yazı, proje ve sayfalarda arama yapmak için yazmaya başlayın.

Esc ile kapat Pagefind ile güçlendirildi