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.
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.
Kaynakların tarihi
Bu görsel 2020-2021 yazılarına dayanır
- TarihKaynak 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
- Adım 1: Blade
Bilinen yol: şablon sunucuda render edilir. - Adım 2: Alpine.js
Şablonda birkaç bağımsız etkileşim: dropdown, accordion, koşullu form alanı. - Adım 3: Livewire
Form ağırlıklı panel; her etkileşim sunucuya bir istek, DOM farkları uygulanır. - Adım 4: Inertia.js
Monolit kalır, arayüz Vue ya da React; API yazılmaz, tek istemci. - Adım 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
- Adım 1: Bağlantıya tıkla
Inertia sayfa geçişini yakalar. - Adım 2: Controller
Inertia::render() sayfa bileşenini ve verisini döner. - Adım 3: JSON yanıt
Bileşen adı ve props gelir; paylaşılan veri her yanıta eklenir. - Adım 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
Seçmeden önce
Karar soruları
- Sayfalar oturum açmadan erişilip arama motorundan mı bulunuyor? (bekliyor)
- Etkileşim yoğun mu, kullanıcı milisaniye hassasiyeti mi bekliyor? (bekliyor)
- Ekipte Vue ya da React yazabilecek biri var mı? (bekliyor)
- API'yi web arayüzünden başka bir istemci de tüketecek mi? (bekliyor)
SPA ve kimlik doğrulama
Çerez mi, token mı?
- İpucuAynı 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.
- NotSPA ve API farklı subdomain'lerde olabilir, farklı ana domain'lerde olamaz. Bu sınırın dışında token modeline geçilir.
- TuzakSubdomain kullanıyorsanız çerez domain'i baştaki noktayla (.example.com) ayarlanmalı; aksi hâlde çerez yalnız bir subdomain'e gider.
