<p><strong>Livewire doğrulaması</strong> (bileşeniniz içinde):<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="k">public</span> <span class="k">function</span> <span class="n">rules</span><span class="p">():</span> <span class="kt">array</span>
{
return [
‘photo’ => [‘required’, ‘image’, ‘max:51200’], // 50MB olan KB
];
}
<p>Tüm üç katman yükleme boyutunu izin vermelidir. Eğer Nginx, yükleme işlemi PHP'ye ulaşmadan reddederse, kullanıcı genel bir 413 hatası görecektir ki bu da faydalı bir doğrulama mesajı değildir.</p>
<h2>
<a name="fullpage-components-and-navigation" href="#fullpage-components-and-navigation"></a>
Tam Sayfa Bileşenleri ve Gezinme
</h2>
<p>Livewire 3, Livewire bileşenlerini doğrudan yollarınıza kaydetmenize olanak tanıyan tam sayfa bileşenleri tanıttı:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="kn">use</span> <span class="nc">App\Livewire\Dashboard</span><span class="p">;</span>
use App\Livewire\Settings;
Route::get(‘/dashboard’, Dashboard::class)->name(‘dashboard’);
Route::get(‘/settings’, Settings::class)->name(‘settings’);
<h3>
<a name="wirenavigate-for-spalike-experience" href="#wirenavigate-for-spalike-experience"></a>
wire:navigate ile SPA Benzeri Deneyim
</h3>
<p>Livewire 3’ün <code>wire:navigate</code> özelliği, çok sayfalı uygulamanızı tam bir JavaScript framework'ü olmaksızın SPA benzeri bir deneyime dönüştürüyor:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight html"><code>[Dashboard](/dashboard)
<p>Bir kullanıcı bu bağlantıya tıkladığında, Livewire yeni sayfayı AJAX ile alır, içeriklerini değiştirir ve tarayıcı geçmişini günceller. Sonuç,:</p>
<ul>
<li>Tarayıcı CSS veya JavaScript’i yeniden analiz etmez.</li>
<li>Paylaşılan layout elemanları yeniden render edilmez.</li>
<li>Geçiş sorunsuzdur.</li>
</ul>
<p><strong>wire:navigate için üretim dikkate almanız gerekenler:</strong></p>
<ul>
<li>Layout yapınızın sayfalar arasında tutarlı olduğundan emin olun. Livewire vücut içeriğini değiştirir, tutarsız layout'lar görsel bozukluklara neden olabilir.</li>
<li>Vücutta yüklenen üçüncü taraf betikleri doğru şekilde yeniden başlatılmayabilir. Bunları Livewire'ın <code>@script</code> direktifine ya da Alpine.js kullanarak başlatmaya taşımak gereklidir.</li>
<li>Analitik betikleri özel bir düzenleme gerektirir. Sayfa görüntüleme etkinliklerini tetiklemek için Livewire'ın navigate olayını kullanın:</li>
</ul>
<div class="highlight js-code-highlight">
<pre class="highlight javascript"><code><span class="nb">document</span><span class="p">.</span><span class="nf">addEventListener</span><span class="p">(</span><span class="dl">'</span><span class="s1">livewire:navigated</span><span class="dl>'</span><span class="p">,</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{</span>
<span class="c1">// Analitikinizde sayfa görüntüleme izleyin</span>
<span class="k">if </span><span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">gtag</span><span class="p">)</span> <span class="p">{</span>
<span class="nf">gtag</span><span class="p">(</span><span class="dl>'</span><span class="s1">event</span><span class="dl>'</span><span class="p">,</span> <span class="dl>'</span><span class="s1">page_view</span><span class="dl>'</span><span class="p">,</span> <span class="p">{</span>
<span class="na">page_location</span><span class="p">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">href</span><span class="p">,</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="p">});</span>
<h3>
<a name="prefetching" href="#prefetching"></a>
Prefetching
</h3>
<p>Livewire 3, kullanıcı bağlantının üzerine geldiğinde sayfaların ön yüklenmesini destekler:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight html"><code>[Dashboard](/dashboard)
<p>Kullanıcı bu bağlantının üzerine geldiğinde, sayfa yüklenmeye başlar ve bu da gezinmeyi daha hızlı hale getirir. Üretimde, bu sunucu isteklerini artırsa da algılanan gecikmeyi azaltır. Sunucu yükünü aşırı yüklememek için sunucunuzu izleyin.</p>
<h2>
<a name="performance-tuning" href="#performance-tuning"></a>
Performans Ayarı
</h2>
<p>Livewire'ın sunucu merkezli mimarisi, performans ayarını geleneksel JavaScript SPA’lardan farklı hale getiriyor.</p>
<h3>
<a name="reduce-payload-size" href="#reduce-payload-size"></a>
Payload Boyutunu Azaltma
</h3>
<p>Her Livewire yanıtı, bileşenin tam yeniden oluşturulmuş HTML'ini içerir. Büyük bileşenler büyük payloadlar üretir.</p>
<p><strong>Bileşenlerinizi küçük ve odaklanmış tutun.</strong> Büyük sayfaları daha küçük bileşenlere ayırın. Her bileşen sadece kendi durumu değiştiğinde yeniden oluşturulur ve çoğu etkileşim için payload'ı azaltır.</p>
<p><strong>Oluşan verileri saklamak yerine hesaplanmış özellikler kullanın:</strong><br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="kn">use</span> <span class="nc">Livewire\Attributes\Computed</span><span class="p">;</span>
#[Computed]
public function fullName(): string
{
return “{$this->firstName} {$this->lastName}“;
}
<p>Hesaplanan özellikler, talep üzerine hesaplanır ve bileşenin durumunda serileştirilmez, böylece payload boyutu azalır.</p>
<h3>
<a name="lazy-loading-components" href="#lazy-loading-components"></a>
Lazy Loading Bileşenleri
</h3>
<p>Livewire 3'ün lazy loading özelliği, bileşenlerin render edilmesini, bileşenin görünür olduğu andan itibaren erteleyerek yönetir:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight html"><code>
<p>Bileşen başlangıçta bir yer tutucu yükler, ardından kullanıcı ona kaydırdıkça tam içeriği bir AJAX isteği ile yükler. Bu, birden fazla bileşenin veya pahalı veritabanı sorgularının yer aldığı sayfalarda çok değerlidir.</p>
<p>Hemen yükleme için, yukarıda kalan bileşenleri kullanın. Aşağıda kalan bileşenler, analitik widget'ları veya ikincil içerikler için lazy loading, ilk sayfa yüklenmesini önemli ölçüde azaltır.</p>
<h3>
<a name="debouncing-and-throttling" href="#debouncing-and-throttling"></a>
Debouncing ve Throttling
</h3>
<p>Her tuş vuruşunda sunucu isteklerini tetikleyen girişler için, istek sayısını azaltmak için debouncing kullanın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight html"><code>
<p>Bu, kullanıcı yazmayı bıraktığında 300ms bekleyerek isteği gönderir. Debouncing olmadan, "arama sorgusu" yazan bir kullanıcı, 12 ayrı sunucu isteği tetikler.</p>
<h3>
<a name="optimize-database-queries" href="#optimize-database-queries"></a>
Veritabanı Sorgularını Optimize Etme
</h3>
<p>Her etkileşim sunucuya çarptığından, N+1 sorgu sorunları daha da belirginleşir. Bir bileşen, kullanıcıları ilgili verileriyle birlikte render ediyorsa, her etkileşimde veritabanı sorguları tetiklenir, sadece sayfa yüklemede değil.</p>
<p>Bileşeninizde eager loading kullanın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="na">#[Computed]</span>
public function users(): LengthAwarePaginator
{
return User::query()
->with([‘organization’, ‘roles’, ‘latestLogin’])
->paginate(20);
}
<h3>
<a name="caching" href="#caching"></a>
Önbellekleme
</h3>
<p>Frekansla değişmeyen pahalı hesaplamaları veya veritabanı sorgularını önbelleğe alın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight php"><code><span class="na">#[Computed(cache: true, seconds: 300)]</span>
public function statistics(): array
{
return [
<span class=”s1>’total_users’ => User::count(),
<span class=”s1>’active_today’ => User::where(<span class=”s1>’last_active_at’, <span class=”s1>’>=’, now()->startOfDay())->count(),
];
}
<h3>
<a name="session-driver" href="#session-driver"></a>
Oturum Sürücüsü
</h3>
<p>Livewire, bileşen durumu için oturumlara dayanır. Seçtiğiniz oturum sürücüsü performansı etkiler:</p>
<ul>
<li>
<code>file</code> (varsayılan): Küçük uygulamalar için çalışır fakat ölçeklenmez. Her istek, bir oturum dosyasını okumak ve yazmak zorundadır, bu da I/O yükü oluşturur.</li>
<li>
<code>database</code>: Daha iyi ölçeklenir ama her Livewire isteğine bir veritabanı sorgusu ekler.</li>
<li>
<code>redis</code>/<code>valkey</code>: Üretim Livewire uygulamaları için önerilen seçenek. Bellek depolama hızlıdır ve Deploynix sunucuları içinde Valkey (Redis uyumlu) ile birlikte yüklenebilir.</li>
</ul>
<p>Oturum sürücünüzü Deploynix ortam değişkenlerinizde yapılandırın:<br/></p>
<div class="highlight js-code-highlight">
<pre class="highlight shell"><code><span class="nv">SESSION_DRIVER</span><span class="o">=</span>redis
<h2>
<a name="nginx-configuration-considerations" href="#nginx-configuration-considerations"></a>
Nginx Yapılandırma Dikkat Edilmesi Gerekenler
</h2>
<h3>
<a name="request-rate-limiting" href="#request-rate-limiting"></a>
İstek Hızlandırma Sınırlaması
</h3>
<p>Livewire, geleneksel bir uygulamadan daha fazla HTTP isteği oluşturduğundan (her etkileşim bir istek), Nginx hız sınırlamasına dikkat edin. Aşırı saldırgan hız limitleri, Livewire etkileşimlerini bozabilir.</p>
<p>Eğer Nginx hız limitleri yapılandırılmışsa, sınırlamaların Livewire'ın istek kalıbını karşılamak için yeterince yüksek olduğundan emin olun. Livewire arayüzü ile aktif olarak etkileşimde bulunan bir kullanıcı, normal bir davranış olarak 2-5 istek oluşturabilir.</p>
<h3>
<a name="caching-headers" href="#caching-headers"></a>
Önbellekleme Başlıkları
</h3>
<p>Livewire istekleri, ara proxy veya CDN'ler tarafından önbellekleme yapılmamalıdır. Livewire doğru önbellek kontrol başlıklarını ayarlasa da, Nginx yapılandırmanızın bunları agresif önbellekleme kurallarıyla geçersiz kılmadığını doğrulayın.</p>
<h3>
<a name="https-requirement" href="#https-requirement"></a>
HTTPS Gereksinimi
</h3>
<p>Livewire 3, güvenlik sebebiyle üretimde HTTPS gerektirir. Deploynix, SSL sertifikalarını otomatik olarak sağlar, bu nedenle bu varsayılan olarak halledilir. Eğer Livewire ile ilgili karışık içerik uyarıları görürseniz, <code>APP_URL</code> ortam değişkeninizin <code>https://</code> kullandığını doğrulayın.</p>
<h2>
<a name="deployment-checklist" href="#deployment-checklist"></a>
Dağıtım Kontrol Listesi
</h2>
<p>Deploynix üzerinde Livewire 3 uygulamalarını dağıtırken kullanabileceğiniz kapsamlı bir kontrol listesi:</p>
<ol>
<li>Dağıtım kancasında <code>php artisan livewire:publish --assets</code> (veya Vite ile paketliyorsanız <code>npm run build</code>) bulunur.</li>
<li>Depolama dizini mevcut ve yazılabilir (<code>storage/app/livewire-tmp</code>).</li>
<li>Dosya yükleme limitleri, PHP, Nginx ve Livewire doğrulaması arasında tutarlı bir şekilde yapılandırılmıştır.</li>
<li>Üretim performansı için oturum sürücüsü Redis/Valkey olarak ayarlanmıştır.</li>
<li>Geçici dosya temizliği programlı olarak ayarlanmıştır (<code>livewire:clear-tmp</code>).</li>
<li>Nginx hız sınırlamaları Livewire'ın istek frekansını karşılayacak şekilde ayarlanmıştır.</li>
<li>SSL aktiftir ve <code>APP_URL</code> <code>https://</code> kullanır.</li>
<li>Analitikler, <code>wire:navigate</code> kullanıyorsanız <code>livewire:navigated</code> etkinliklerini takip etmek üzere yapılandırılmıştır.</li>
<li>Önbellek, uygun durumlarda hesaplanan özellikler için yapılandırılmıştır.</li>
<li>Aşağıda kalan bileşenler için lazy loading kullanılır.</li>
</ol>
<h2>
<a name="conclusion" href="#conclusion"></a>
Sonuç
</h2>
<p>Livewire 3, Laravel geliştiricilerinin ayrı bir JavaScript framework’ünü gerektirmeksizin etkileşimli arayüzler istediklerinde güçlü bir seçenektir. Sunucu merkezli mimarisi, dağıtım stratejinizin, sunucu yapılandırmanızın ve performans ayarınızın JavaScript SPA dağıtımlarından farklı olduğu anlamına gelir.</p>
<p>Deploynix üzerinde, ana unsurlar şunlardır: dağıtım sırasında varlıkları yayınlama, tüm katmanlarda dosya yükleme limitlerini yapılandırma, doğru oturum sürücüsünü (Valkey/Redis) seçme ve Nginx'i Livewire'ın istek kalıplarına göre ayarlama. Platform, SSL sağlama, sunucu izleme ve daemon yönetimini üstlenerek sizin uygulama oluşturma odaklanmanızı sağlar.</p>
<p>Yukarıdaki dağıtım kontrol listesi ile başlayın, Deploynix'in gerçek zamanlı paneli üzerinden sunucu performansınızı izleyin ve trafik arttıkça optimizasyon yapın. Livewire 3'ün 2. versiyona göre performans iyileştirmeleri önemli olup, uygun üretim yapılandırması ile yoğun trafik alan uygulamaları güvenle yönetir.</p>
Kaynak: Orijinal Makale
