Next.js 14'ün Server Component'ları, paket boyutunu (bundle size) yaklaşık %60 oranında azaltıyor ve tipik bir blog sayfasında ilk boyama (first-paint) sürelerini 200 ms'nin altına düşürüyor; bu da kullanıcıların içeriği daha hızlı görmesi ve arama motorlarının tamamen işlenmiş (rendered) HTML alması anlamına geliyor.

Yeni sürüm, Next.js ile oluşturulan React uygulamaları için varsayılan yürütme modelini değiştiriyor. Eskiden her bileşen tarayıcıya gönderilirken, geliştiriciler artık kullanıcı arayüzünün (UI) belirli kısımlarını "Server Components" olarak işaretleyebiliyor, böylece bu kısımlar yalnızca arka uçta (backend) çalışıyor. Bu bileşenlerin kodu istemciye (client) asla ulaşmıyor ve tarayıcıya yalnızca etkileşim gerektiren kısımlar kalıyor.

Bu değişimin önemi neden büyük

React geliştiricileri uzun süredir birbiriyle bağlantılı üç sorunla mücadele ediyor: yoğun ağ istekleri, şişkin JavaScript paketleri ve yavaş sayfa yüklemeleri. Bu sorunlar aynı zamanda SEO'ya da zarar veriyor; çünkü tarama botlarına gönderilen ilk HTML genellikle boştur ve arama botlarını istemci tarafındaki hidrasyonu (hydration) beklemeye zorlar. Next.js 14, veri yoğunluklu işleri tamamen istemci dışına taşıyarak sorunun kökenine iniyor.

Server Components eski modelden nasıl ayrılıyor?

  • Server Components – Sunucuda çalışır, veri çeker, veritabanlarıyla iletişim kurar ve düz HTML çıktısı verir. JavaScript kodları ağ üzerinden asla taşınmaz.
  • Client Components – Tarayıcıda kalır ve düğme tıklamaları, form gönderimleri veya React state veya effect'lerini kullanan herhangi bir bileşen gibi kullanıcı arayüzü etkileşimlerini yönetir.

Framework, bu ayrımı basit bir direktif ile uyguluyor. Bir dosyanın en üstüne use client eklemek, Next.js'e o bileşeni yalnızca istemci tarafında işlemesini söyler. Bu işaretleyiciye sahip olmayan her şey varsayılan olarak bir Server Component'tır.

Gerçek dünya verileri

Kişisel bir blog sayfası üzerinde yapılan hızlı bir deney, etkinliği gözler önüne seriyor. Veri çekme (fetch) işlemini bir Server Component içine taşıyıp listenin sunucu tarafından statik HTML olarak işlenmesine izin verdikten sonra, JavaScript paketi %60 oranında küçüldü ve sayfa 200 ms'nin altında bir sürede yüklendi.

Pratik bir katmanlama deseni

  1. Alt katman (Server) – Verileri API'lerden veya veritabanlarından çekin. Tüm özel mantığı (private logic) burada tutun; bu kodlar sunucudan asla ayrılmaz.
  2. Orta katman (Server) – Ham veriyi saf HTML işaretlemesine (markup) dönüştürün. Bu katman hâlâ React'ın JSX sözdizimini kullanabilir ancak yalnızca sunucu tarafında kalır.
  3. Üst katman (Client) – Etkileşim için küçük, izole widget'lar ekleyin. Tipik örnekler; "beğen" butonları, yorum formları veya state gerektiren açılır menülerdir.

Bu hiyerarşiyi takip etmek, uygulamanın büyük kısmını hafif tutarken kullanıcıların beklediği dinamik hissi korur.

Bugün deneyebileceğiniz adımlar

  1. Kod tabanınızda yalnızca veri çekmek için useEffect kullanan bileşenleri tarayın.
  2. Fetch çağrısını yeni bir Server Component içine çıkarın ve işlenmiş işaretlemeyi (markup) döndürmesini sağlayın.
  3. Geriye kalan etkileşimli öğeler için minimal bir istemci bileşeni oluşturun (en üste use client ekleyin).
  4. Paket analiz aracınızı (bundle analyzer) tekrar çalıştırın; boyutta fark edilir bir düşüş görmelisiniz.

Her yere use client serpiştirmekten kaçının. Eğer bir bileşen React state, context veya yaşam döngüsü kancalarına (lifecycle hooks) dayanmıyorsa, onu bir Server Component olarak bırakın. İstemci dışında ne kadar çok kod tutarsanız, indirme o kadar küçük ve sayfa o kadar hızlı olur.

Özet: Veri çekme ve ağır işleme (rendering) işlemlerini sunucuya taşıyarak Next.js 14, çok daha az JavaScript göndermenize, tamamen işlenmiş HTML'i anında sunmanıza ve etkileşimi gerçekten gerekli olduğu yerlerde korumanıza olanak tanır. Sonuç; hem kullanıcılara hem de arama motorlarına fayda sağlayan daha hızlı ve daha yalın bir web deneyimidir.