Laravel ve React'te Tablo Durumunu URL'de Tutmak
Uygulamalar büyüdükçe, insanlar saatlerce içinde yaşadıkları tablalarla karşılaşırsın: ürünler, faturalar, tedarikçiler. İlk sürüm kolay oluyor, her şeyi yükle, render et, belki istemci tarafında bir filtre ekle. Sonra tablo 40 bin satıra ulaşıyor, birisi "stoka göre sırala, sadece aktif olanlar, sayfa 3" diyor ve bir meslektaş tam o görünümü bir yöneticiye link olarak göndermek istiyor.
Sorun şu: eğer filtreleme ve sıralama React state'inde yaşıyorsa, sayfa yenilediğinde ya da link kopyalandığında tüm durum kaybolur. Sunucuda gerçek veriler var, istemci tarafında ise bir kopyası, iki kaynak doğruluğu. Ayrıca 40 bin satırı tarayıcıya göndermek bellekte patlamaya, yavaş ilk render'a ve devasa JSON payload'a neden oluyor.
Server-driven data tables yaklaşımı bunu tersine çeviriyor. Sunucu filtrelemeyi, sıralamayı ve sayfalamayı yapar; tarayıcı URL'si tablonun durumunun tek kaynağı olur. Kullanıcı "Stok" başlığına tıkladığında, React bir sorgu parametresi ekler (`?sort=stock&order=asc`), Laravel bu parametreleri okur, doğru satırları döner, Inertia sayfayı günceller. Link kopyalandığında, URL zaten tüm filtreleri içeriyor.
Praktik olarak: bir `ProductController` metodu `$request->query('sort', 'id')` ve `$request->query('filter')` parametrelerini alır, `Product::query()` üzerinde `->orderBy()` ve `->where()` zincirler, sonra `->paginate()` yapar. React bileşeni ise tıklamaya basit bir fonksiyon bağlar: `window.location.href = '?sort=name&order=desc'` ya da Inertia'nın `visit()` metodunu kullanır.
Bu yöntemin avantajı açık: veri boyutu sorun değil, durum paylaşılabilir ve yer imi alınabilir, sunucu her zaman doğru veriyi kontrol eder. Dezavantajı da var, her tıklama bir sayfa isteği demek, fakat Inertia bunu yumuşatıyor; Inertia partial reload'lar yapabilir, sadece tablo bileşenini günceller.
0 yorum