N+1 Sorgu Çözümü ile Sayfa Yükleme Süresini Nasıl Hızlandırdım (React + Laravel)

Laravel ve React uygulamamı ilk oluşturduğumda, her şey yolunda gidiyordu—ta ki veriler büyüyene kadar.

İlk başta anında yüklenen sayfalar saniyeler alır hale geldi. Sonra daha da uzadı.

Başta bunu frontend sorunu olarak düşündüm. Belki React çok fazla yeniden render ediyordu. Belki bileşenlerim optimize edilmemişti.

Yanıldım.

Asıl problem, backend’deydi ve bu problemin adı: N+1 sorgu problemi.

İlk Başta Görmediğim Problem

Diyelim ki Laravel backend’inde şunlar vardı:

• Bir öğrenci listesi
• Her öğrencinin notları var
• Her notun bir dersle ilişkisi var

Basit, değil mi?

Ancak verileri fetch ettiğim de olan şuydu:

1 sorgu ile öğrencileri almak
Sonra her öğrencinin ilişkili verilerini almak için N sorgu

Yani 100 öğrenci varsa, toplamda:
👉 101 sorgu çalıştırıyordum.

Bu, N+1 problemidir.

Ve performansı mahvetti.

Nasıl Fark Ettim

Backend’i debug etmeye başladım ve garip bir şey fark ettim:

• API yanıt süresi yavaştı
• Veritabanı sorguları veri boyutu ile artıyordu

Laravel debug araçları ve logları kullandım.

O zaman net bir şekilde gördüm:
👉 Sorgular döngüler içinde çalıştırılıyordu

Burası, problemimin farkına vardığım an oldu.

Çözüm: Eager Loading

Laravel’in bunu çözmek için bir çözümü var: Eager Loading

İlişkili verileri tek tek almak yerine, hepsini tek bir sorguda yükledim.

Önce (Kötü)

$students = Student::all();

foreach ($students as $student) {
    echo $student->marks; // her seferinde sorgu tetikler
}

Sonra (İyi)

$students = Student::with('marks')->get();

Artık:

• Toplamda sadece 2 sorgu var
• Öğrenci sayısına bakılmaksızın

Bu büyük bir iyileşme sağladı.

Derinleşmek: İçi İçine Geçen İlişkiler

Benim durumum o kadar basit değildi.

Daha derin ilişkilerim vardı:

• öğrenciler → notlar → dersler

Bu yüzden iç içe eager loading kullandım:

$students = Student::with('marks.subject')->get();

Artık her şey, minimum sorgu ile verimli bir şekilde yükleniyor.

API Yanıtını Optimize Etme

Sorguları düzeltmek yeterli değildi.

Ayrıca verilerin React’e nasıl gönderileceğini de geliştirdim.

Neyi Değiştirdim:

• Gereksiz alanları kaldırdım
• API Resources (Transformers) kullandım
• Sadece UI’nın ihtiyacı olanı gönderdim

return StudentResource::collection($students);

Bu, yük hacmini azaltarak hız arttırdı.

React Tarafında Optimizasyon

Laravel’i düzelttikten sonra, React’i de geliştirdim.

1. Gereksiz Yeniden Render’ları Önleyin

Kullandım:

• useMemo
• useCallback
• Uygun durum yapısı

2. Temel Bileşenleri Tembel Yükleme

const Dashboard = React.lazy(() => import('./Dashboard'));

Bu, başlangıç yükleme süresini azalttı.

3. Verimli Veri Fetching

• Tekrar eden API çağrılarını önledim
• Mümkünse sonuçları önbelleğe aldım

Sonuç

Tüm optimizasyonların ardından:

• Sayfa yükleme süresi önemli ölçüde düştü
• API daha hızlı ve ölçeklenebilir hale geldi
• Büyük verilerle bile UI anlık hissettirdi

Artık yavaş ve ağır olan bir şey, pürüzsüz ve duyarlı hale dönüştü.

Ne Öğrendim

Bu deneyim bana önemli bir şey öğretti:

Performans sorunları genellikle düşündüğünüz yerlerde değildir.

React’a bakmak için zaman harcadım—ama asıl sorun veritabanındaydı.

Temel Çıkarımlar

• Backend sistemlerinde her zaman N+1 sorgularını takip edin
• Laravel’de Eager Loading kullanın (with())
• API yanıtlarını optimize edin, sadece sorguları değil
• Frontend performansı backend verimliliğine bağlıdır

Son Düşünceler

N+1 sorgu problemini düzeltmek, uygulama geliştirme bakış açımı tamamen değiştirdi.

Artık bir özellik tasarlarken, kendime soruyorum:

👉 Bu kaç sorgu çalıştıracak?

Çünkü performans sadece kodla değil—sistemlerin etkileşimiyle ilgilidir.

Ve kök sorunu çözdüğünüzde, her şey daha hızlı hale gelir.