Hız İlüzyonu

Modern frontend framework'leri "hızlı" hissettirmek üzerine kuruludur, gerçekten hızlı olmak üzerine değil. Next.js App Router harika özelliklerle geldi ama yanlış kullanıldığında "Client-Side Bloat" (İstemci Tarafı Şişkinliği) yaratmak çok kolay.

1. "Use Client" Laneti

Geliştiricilerin en sık yaptığı hata, bir useState ihtiyacı olduğunda en tepe bileşene "use client" yazmaktır. Bu, o bileşenin ve onun altındaki tüm çocukların JavaScript bundle'ına dahil edilmesine neden olur.

Çözüm: Leaf Composition. Etkileşimli butonu küçük bir bileşen yapın, sadece ona "use client" deyin. Sayfanın geri kalan %90'ı sunucuda (RSC) kalsın ve HTML olarak gelsin.

2. INP (Interaction to Next Paint) Krizi

Google'ın yeni metriği INP, tıkladıktan sonra arayüzün ne kadar sürede tepki verdiğini ölçer. Eğer ana thread'i filtrelenenListeyiHesapla() gibi ağır bir işlemle tıkarsanız, kullanıcı butona basar ama hiçbir şey olmaz.

Çözüm: useTransition ve useOptimistic. React 18+ ile gelen bu hook'lar, UI'ın "donmadan" arka planda işlem yapmasını sağlar. Kullanıcıya sahte (optimistic) bir başarı mesajı göstermek, veritabanından cevap beklemekten her zaman daha iyidir.

3. Font ve Görsel Yükü

CLS (Kayma) sorununun %90 suçlusu, boyutları verilmemiş görseller ve sonradan yüklenen fontlardır. next/font kullanın. Bu, font dosyasını CSS'in içine gömer (inline) ve titremeyi yok eder.

Son Söz

Performans, .map() döngüsünü optimize etmekten ibaret değildir. Performans, tarayıcıya "ne kadar az kod gönderdiğinizle" ilgilidir. Sunucu güçlüdür, telefonlar zayıftır. Yükü sunucuya yıkın.