Next.js Server Components ile Performans Optimizasyonu

"Server Component kullan, hızlanır" yeterli bir tavsiye değil

Next.js App Router'a geçen birçok proje Server Components'i doğru kullanmıyor; sonuçta ya performans kazanımı hiç olmuyor ya da "use client" her yere yapıştırılıp özellik tamamen boşa çıkıyor. Bu sitenin kendisini (canturkcelikok.com) kurarken izlediğim yaklaşımı paylaşıyorum.

Varsayılan: Server Component

Bir bileşen veri çekiyor, state tutmuyor, kullanıcı etkileşimine ihtiyaç duymuyorsa Server Component olarak kalmalı. Bu sitede proje listesini, blog yazılarını, hizmetleri çeken bütün bileşenler sunucuda render edilir — client'a hiç JavaScript göndermez.

// Server Component — veritabanına doğrudan erişir, client'a JS göndermez
export async function CaseStudies() {
  const projects = await prisma.project.findMany({ where: { published: true } });
  return <div>{/* ... */}</div>;
}

"use client" sınırını doğru yerde çizmek

Animasyon (Framer Motion), form state'i (React Hook Form), etkileşimli menüler — bunlar gerçekten client tarafında çalışmalı. Ama hatanın büyük kısmı, bir sayfanın tamamını client yapmak. Doğru yaklaşım: interaktif kısmı küçük bir bileşene izole edip geri kalanı server'da bırakmak.

// Yanlış: tüm sayfa client oluyor
"use client";
export default function Page() {
  const [open, setOpen] = useState(false);
  return <div>{/* bütün sayfa içeriği burada */}</div>;
}
 
// Doğru: sadece menü client, geri kalan server
export default async function Page() {
  const data = await getData(); // server'da çalışır
  return (
    <div>
      <MobileMenu /> {/* küçük, izole client component */}
      <Content data={data} /> {/* server component */}
    </div>
  );
}

Veri çekmeyi paralelleştirmek

Sıralı await zinciri, sayfanın gereksiz yere yavaşlamasının en yaygın sebebi. Promise.all ile paralel çekim bu sitede her sayfada standart:

const [settings, projects, posts] = await Promise.all([
  getSiteSettings(),
  prisma.project.findMany(),
  prisma.blogPost.findMany(),
]);

Görsellerde next/image'ı atlamamak

Statik görseller (proje ekran görüntüleri gibi) için next/image otomatik boyutlandırma ve lazy-loading sağlıyor. Elle <img> kullanmak, Core Web Vitals skorlarını gereksiz yere düşürüyor.

Statik üretimden kaçmamak

Sık değişmeyen sayfalar (proje detayları, blog yazıları) için generateStaticParams ile derleme zamanında statik HTML üretmek, her istekte veritabanına gitmekten çok daha hızlı. Bu sitede 4 proje ve blog yazılarının tamamı bu şekilde statik üretiliyor.

Sonuç

Server Components bir "aç/kapat" anahtarı değil; her bileşen için ayrı ayrı verilen bir mimari karar. Doğru uygulandığında kullanıcıya giden JavaScript miktarı ciddi oranda azalıyor — ve bu, gerçek kullanıcıların hissettiği bir hız farkı yaratıyor.

Next.js Server Components ile Gerçek Performans Kazanımı