Next.js Performans Optimizasyonu

Server ve Client Components Ayrımı

Next.js App Router'da her bileşen varsayılan olarak Server Component'tır; sunucuda render edilir, HTML olarak istemciye gönderilir ve JavaScript bundle'a eklenmez. Bu yaklaşım özellikle veri çeken bileşenler için büyük avantaj sağlar: fetch() çağrısı sunucuda gerçekleşir, veritabanı veya API anahtarı client'a hiç gitmez ve initial page load boyutu küçülür. Büyük bir veri tablosunu doğrudan Supabase'den çeken bir Server Component, aynı işi client-side yapan bir bileşene kıyasla belirgin şekilde daha az JavaScript yükler.

Client Component sadece gerçekten istemci tarafı özellik gerektirenler için kullanılmalıdır: onClick, onChange gibi event handler'lar, useState veya useReducer gibi React state'i, useEffect içindeki yan etkiler ve localStorage veya window gibi browser API'ları. "use client" direktifini gerektiği kadar az bileşene koy; her bileşenin varsayılanı Server olduğunda bundle boyutu minimize olur. Bir alt bileşen interaktif olacaksa yalnızca o bileşeni "use client" ile işaretle, tüm sayfayı değil.

ISR vs SSG vs SSR Seçimi

Statik Site Generation (SSG) derleme zamanında her sayfa HTML olarak üretir ve CDN'den sunulur; en hızlı Time to First Byte'ı sağlar ama veri değişmeden sayfayı güncellemez. Blog yazıları, pazarlama sayfaları ve değişmeyen içerikler için idealdir. Server Side Rendering (SSR) her istekte sunucuda render gerçekleştirir; kullanıcıya özel içerik veya sık değişen veriler için uygundur ama yük altında sunucu maliyeti artar.

ISR (Incremental Static Regeneration), SSG'nin hızını SSR'ın tazeliğiyle birleştirir. revalidate = 86400 ayarı ile bir ürün sayfası günde bir kez arka planda yenilenir; kullanıcı her seferinde statik HTML alır, eski sayfa değiştirme işlemi arka planda sessizce gerçekleşir. E-ticaret ürün sayfaları, fiyat güncellemeleri dakikada değil saatte bir tolere edilebilen içerikler ve büyük içerik katalogları için ISR doğru dengedir. revalidate = 0 ise her istekte yeniden oluşturma anlamına gelir ve ESR gibi davranır.

Core Web Vitals İyileştirme

LCP (Largest Contentful Paint), sayfadaki en büyük görsel veya metin bloğunun yüklenme süresini ölçer. Next.js'in <Image> bileşeni hero fotoğrafına priority prop eklediğinde tarayıcı o görseli preload eder ve LCP değerini anlamlı ölçüde düşürür. LCP için 2,5 saniye altı "iyi" olarak sınıflandırılır; priority olmayan büyük görseller bu eşiği kolayca aşar.

CLS (Cumulative Layout Shift), sayfanın yüklenirken kayması ve içeriğin beklenmedik biçimde hareket etmesini ölçer. En yaygın neden boyutsuz görseller ve geç yüklenen fontlardır. <Image> bileşenine width ve height prop yazmak veya CSS'de aspect-ratio: 16/9 sabitlemek bu kaymayı önler. INP (Interaction to Next Paint) metriği ise kullanıcı bir etkileşim yaptığında sayfanın kaç ms içinde tepki verdiğini ölçer; ağır JavaScript event handler'ları bu metriği etkileyen başlıca nedendir.

Streaming ve Suspense

Next.js App Router'da <Suspense> ile sayfa parçaları sıralı değil paralel olarak yüklenir. Veri çeken ağır bir bileşeni <Suspense fallback={<Skeleton />}> içine aldığında sunucu sayfanın geri kalanını bekletmek yerine hazır olan kısımları akışla gönderir; kullanıcı boş sayfa yerine aşamalı olarak doldurulan bir deneyim görür. Bu, özellikle yavaş API yanıtına bağımlı bir bölüm içeren sayfalarda TTFB'yi dramatik biçimde iyileştirir.

loading.tsx dosyası Next.js'te bir route segment yüklenirken otomatik olarak gösterilen bir Suspense boundary tanımlar; ayrıca <Suspense> eklemene gerek kalmaz. Paralel data fetching için birden fazla fetch() çağrısını Promise.all() ile birleştir; sıralı await kullanmak kümülatif API gecikmesi yaratır. Her bağımsız veri isteği ayrı Suspense sınırı içindeyse bir API'nin yavaşlaması diğer bölümlerin görüntülenmesini engellemez.

Sık Sorulan Sorular

"use client" direktifini ne kadar kullanmalıyım? Mümkün olduğunca az. Event handler veya state gerektiren en küçük bileşen birimini Client Component yap; o bileşenin parent'ını Server Component olarak bırak. Bundle boyutu ve ilk yükleme süresi doğrudan bu oranla ilişkili.

ISR revalidate süresi nasıl belirlenir? Verinin ne kadar stale kalabileceğini belirler: ürün fiyatı için 1 saat, blog içeriği için 24 saat, anlık stok verisi için 0 (SSR) makul başlangıç noktalarıdır. Çok kısa revalidate sunucu yükü oluşturur; çok uzun eski veri gösterir.

Core Web Vitals'ı nasıl ölçersiniz? Vercel Analytics, Google Search Console ve PageSpeed Insights gerçek kullanıcı verisi sağlar. Geliştirme sırasında Lighthouse (Chrome DevTools) ve next build && next start ile yerel benchmark yapabilirsin.

Server Component'ten Client Component'e prop gönderilebilir mi? Evet, ama yalnızca serileştirilebilir değerler (string, number, array, plain object). Fonksiyon veya class instance gönderilemez. Bu sınırı aşmak istiyorsan Client Component kendi fetch'ini yapabilir veya React Context kullanabilirsin.

Streaming için <Suspense> kullanmak SEO'yu etkiler mi? Hayır; Google bot akışlı içeriği bekleyerek okur ve JavaScript çalıştırabildiğinden Suspense ile yüklenen içerik indexlenir. Ancak kritik SEO içeriğini Suspense dışında tutmak en güvenli yaklaşımdır.