Next.js 15 ile Gelen Performans Devrimi
Modern web uygulamalarında hız sadece bir lüks değil; doğrudan Google sıralamasını, hemen çıkma oranını ve dönüşüm oranlarını belirleyen temel metriktir. Next.js 15, React 19 ve Turbopack entegrasyonuyla beraber render sürelerinde çığır açtı.
Bu rehberde, production ortamında LCP < 0.8s, INP < 50ms ve CLS = 0 değerlerine nasıl ulaştığımızı adım adım inceliyoruz.
1. React Server Components (RSC) ve Streaming SSR
Client bileşenleri yalnızca etkileşim (state, onClick, useEffect) gerektiren yerlerde kullanılmalıdır. Sayfanın iskeleti ve veri çeken kısımları mutlaka Server Component olmalıdır.
Streaming Suspense kullanarak sayfanın iskeletini milisaniyeler içinde kullanıcıya ulaştırın, ağır verileri arkadan asenkron akıtın.
2. Font ve Görsel Optimizasyonları
next/fontKullanımı: Google Fonts harici ağ isteği yapmadan yerel olarak build edilir ve CSS içine inline preload edilir. Bu da layout shift (CLS) sorununu tamamen ortadan kaldırır.next/imageYapılandırması: Görsellerdepriorityetiketini yalnızca Hero görseline verin. Format olarak AVIF ve WebP zorunlu kılınmalıdır.
3. Asenkron İstek Yaşam Döngüsü ve Caching
Next.js 15'te cookies(), headers(), params ve searchParams artık birer Promise olarak çözümlenir. Edge cache için stale-while-revalidate ve tag tabanlı on-demand revalidation (revalidateTag) mekanizmalarını aktif kullanarak veritabanı yükünü minimize edin.