Next.js ile Server Components

React Server Components (RSC), modern Next.js uygulamalarının geliştirilme şeklini değiştirdi. Mantığın daha fazlasını sunucuda çalıştırarak uygulamalar tarayıcıya daha az JavaScript gönderir; performans iyileşir ve veri akışı sadeleşir. App Router’da bileşenler varsayılan olarak Server Component’tir.

Sunucuda render edin ve veri çekin

Bir Server Component veriyi doğrudan await edebilir — useEffect yok, loading kalıbı yok, açığa çıkan API anahtarı yok:

// app/posts/page.tsx — varsayılan olarak Server Component
async function PostsPage() {
  const posts = await db.post.findMany(); // sunucuda çalışır
  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}

Veritabanı sorguları ve sırlar sunucuda kalır; istemci veri çekme kodunu hiç indirmez.

Client Components’i yalnızca gerektiğinde kullanın

Etkileşim, browser API’leri ve yerel state bir Client Component gerektirir. Açıkça işaretleyin ve küçük tutun:

'use client';
import { useState } from 'react';

export function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? '♥' : '♡'}</button>;
}

Desen şu: sayfaları ve layout’ları Server Component tutun, 'use client'’i en küçük etkileşimli yapraklara itin. Bir sunucu sayfası, kendisi client component’e dönüşmeden bir client buton render edebilir.

Suspense ile streaming

Tüm sayfayı beklemek yerine Next.js, bölümleri çözüldükçe akıtabilir:

import { Suspense } from 'react';

export default function Page() {
  return (
    <>
      <Header />
      <Suspense fallback={<p>Akış yükleniyor…</p>}>
        <Feed />  {/* yavaş veri — hazır olunca akar */}
      </Suspense>
    </>
  );
}

Kullanıcı kabuğu ve header’ı anında görürken yavaş kısım dolar — sayfayı bloklamadan daha iyi algılanan performans.

Sonuç

Server Components, modern Next.js’in temel bir parçasıdır. Zihinsel model basittir: varsayılan sunucu, kenarlarda istemci, yavaş kısımları akıt. Tutarlı uygulandığında; daha hızlı, daha güvenli ve daha sürdürülebilir uygulamalar üretir.