Laravel Livewire 3: JS Yazmadan Reaktif Arayüz

Laravel Livewire, tek satır JavaScript yazmadan dinamik ve reaktif arayüzler kurmanı sağlayan bir full-stack çatıdır. Bileşenlerini düz PHP sınıfları ve Blade şablonlarıyla yazarsın; Livewire kullanıcı etkileşimlerini arka planda sunucuya gönderir, dönen HTML'i akıllıca DOM'a yansıtır. Bu sayede arama kutuları, formlar, sayfalama ve canlı filtreler gibi klasik olarak SPA gerektiren özellikleri Laravel'in tanıdık dünyasından çıkmadan inşa edersin. Bu yazıda Livewire 3'ün kurulumunu, çalışma mantığını ve gerçek projelerde işime yarayan örüntüleri anlatıyorum.

Livewire 3 ne getiriyor?

Üçüncü sürüm, önceki nesle göre hız ve geliştirici deneyimi tarafında ciddi bir sıçrama. Öne çıkanlar:

Daha hafif yük: Alpine.js artık paketin içinde geliyor, ayrıca eklemene gerek kalmıyor.
Yeni dizin yapısı: Bileşen sınıfları app/Livewire, görünümler resources/views/livewire altında.
Öznitelik tabanlı API: #[Validate], #[Computed], #[On] gibi PHP 8 öznitelikleriyle daha temiz kod.
wire:model varsayılan tembel: Performans için bağlamalar artık sunucuya her tuş vuruşunda değil, varsayılan olarak alan terk edildiğinde gider.

Kurulum

Mevcut bir Laravel 10 veya 11 projesinde Livewire'ı Composer ile eklemen yeterli:

composer require livewire/livewire

Ardından ana layout dosyanın <head> bölümüne stilleri, kapanan </body> etiketinden hemen önce de betikleri ekle. Livewire 3'te çoğu durumda bunlar otomatik enjekte edilir, ama açıkça yerleştirmek istersen:

<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}
    @livewireScripts
</body>

İlk bileşenini oluştur

Artisan ile bir bileşen üretelim. Aşağıdaki komut hem PHP sınıfını hem de Blade görünümünü oluşturur:

php artisan make:livewire SearchPosts

Sınıf tarafında genel (public) özellikler doğrudan görünüme bağlanır. Bir arama kutusu örneği:

namespace App\Livewire;

use App\Models\Post;
use Livewire\Component;
use Livewire\WithPagination;

class SearchPosts extends Component
{
    use WithPagination;

    public string $search = '';

    public function render()
    {
        return view('livewire.search-posts', [
            'posts' => Post::where('title', 'like', "%{$this->search}%")
                ->latest()
                ->paginate(10),
        ]);
    }
}

Görünüm tarafında wire:model.live ile arama alanını özelliğe bağlarsın. .live değiştiricisi, kullanıcı yazdıkça sunucuyu güncelleyerek sonuçların anında filtrelenmesini sağlar:

<div>
    <input type="text" wire:model.live="search" placeholder="Ara...">

    @foreach ($posts as $post)
        <article wire:key="{{ $post->id }}">
            <h3>{{ $post->title }}</h3>
        </article>
    @endforeach

    {{ $posts->links() }}
</div>

wire:key kullanmak, döngüyle üretilen elemanlarda Livewire'ın DOM'u doğru eşlemesi için kritiktir. Atlanırsa liste yeniden sıralandığında beklenmedik davranışlar görebilirsin.

Aksiyonlar: tıklamaları sunucuya bağlamak

Reaktifliğin asıl gücü aksiyonlarda. Bileşen sınıfındaki herhangi bir genel metodu doğrudan bir HTML olayına bağlayabilirsin. Diyelim bir gönderiyi favorilere ekliyoruz:

public function toggleFavorite(int $postId): void
{
    $post = Post::findOrFail($postId);
    auth()->user()->favorites()->toggle($post);
}

Blade'de wire:click ile çağırırsın:

<button wire:click="toggleFavorite({{ $post->id }})">
    Favorile
</button>

Buton tıklandığı anda Livewire metodu sunucuda çalıştırır ve değişen HTML parçasını sayfaya geri yansıtır; tüm sayfa yenilenmez. Yavaş işlemlerde kullanıcıya geri bildirim için wire:loading ile bir yükleniyor göstergesi gösterebilirsin.

Doğrulama ve hesaplanan özellikler

Livewire 3'te doğrulama, öznitelik tabanlı API ile çok temiz. Bir özelliğe #[Validate] ekleyip kuralı belirtmen yeterli:

use Livewire\Attributes\Validate;

class CreatePost extends Component
{
    #[Validate('required|min:5')]
    public string $title = '';

    public function save(): void
    {
        $this->validate();
        Post::create(['title' => $this->title]);
        $this->reset('title');
    }
}

Hata mesajlarını görünümde @error('title') ile gösterirsin. Türetilmiş veriler için #[Computed] ile hesaplanan özellikler tanımlayabilir, sonucu istek boyunca önbelleğe alıp gereksiz sorguları önleyebilirsin.

Performans için pratik ipuçları

Tembel bağlama tercih et: Her tuş vuruşunda istek atmaya gerçekten ihtiyacın yoksa .live yerine düz wire:model kullan.
Geciktirme uygula: Canlı aramada wire:model.live.debounce.300ms ile gereksiz istekleri azalt.
Tembel yükleme: Ağır bileşenleri #[Lazy] özniteliğiyle ya da iskelet (placeholder) ile ertelenmiş yükle.
wire:key'i unutma: Listelerde doğru DOM eşlemesi için zorunlu.

Ne zaman Livewire, ne zaman değil?

Livewire; yoğun arka uç mantığı olan, Laravel ekibinin yönettiği projelerde harika. Form ağırlıklı paneller, yönetim arayüzleri, filtreli listeler için ekibe ayrı bir API ve frontend yığını maliyeti getirmeden hızla sonuç verir. Buna karşılık, milisaniyelik anlık etkileşim gerektiren (sürükle-bırak editörler, gerçek zamanlı oyun arayüzleri) veya tamamen istemci tarafında çalışması gereken durumlarda Vue ya da React daha uygun olabilir. Çoğu klasik web uygulamasında ise Livewire, hız ile sadelik arasında çok dengeli bir nokta sunar.

Sık Sorulan Sorular

Livewire 3 için ayrıca Alpine.js kurmam gerekir mi?

Hayır. Livewire 3, Alpine.js'i paket içinde getirir ve otomatik yükler. wire: direktiflerinin yanında x- Alpine direktiflerini de doğrudan kullanabilirsin; ayrı kurulum yapmana gerek yoktur.

Livewire her etkileşimde sunucuya istek atar, bu yavaş değil mi?

Her etkileşim küçük bir AJAX isteğidir; tüm sayfa değil yalnızca değişen parçalar döner. Tembel bağlama, debounce ve hesaplanan özelliklerle istek sayısını kontrol ettiğin sürece çoğu uygulama için performans gayet iyidir.

SEO açısından bir sorun yaratır mı?

Hayır. Livewire ilk sayfayı sunucuda tam HTML olarak render eder, bu yüzden arama motorları içeriği sorunsuz tarar. Sonraki etkileşimler dinamik olur ama ilk yükleme tamamen sunucu tarafıdır.

Reaktif bir Laravel arayüzü mü kurman gerekiyor? Livewire ile JavaScript yığını taşımadan hızlı, bakımı kolay paneller çıkarabiliriz. Projeni konuşmak için benimle iletişime geç.