📌 Next.js – Server Side Rendering & React Server Components

Next.js 13+ ile App Router, Server/Client Component ayrımı ve RSC mimarisi, uygulamaları daha hızlı, güvenli ve ölçeklenebilir hale getirir.

1️⃣ Client ve Server Component Kuralları

• Server Component (SC): Varsayılan olarak tüm page ve layout dosyaları server component’tir.
  • State/hook kullanamaz.
  • Interaktif değildir, 0 KB JS bundle içerir.
  • Veri çekme işlemleri içinde async/await kullanılabilir.
• Client Component (CC): "use client" direktifi ile oluşturulur.
  • State/hook kullanabilir, interaktif olabilir.
  • Server Component’leri import edemez.

💡 Not: CC’nin alt component’lerinde tekrar "use client" yazmaya gerek yoktur; sub tree otomatik client kabul edilir.

// client component
"use client";
import { useState } from "react";
function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count+1)}>{count}</button>;
}

2️⃣ Server Component’ler ve Re-render

• Sunucu component’ler URL değiştiğinde yeniden render edilir.
• Client component’ler state değiştiğinde veya interaktif işlemde yeniden render olur.

3️⃣ React Server Components (RSC) Nedir?

• RSC, sunucu tarafında render edilen React bileşenleridir.
• Amaç: İstemciye gereksiz JS göndermemek, veriyi direkt sunucuda çekmek.
• Avantajlar:
  • Sıfır JS bundle → daha hızlı yükleme.
  • API anahtarlarına ve sunucu verilerine direkt erişim.
  • Full-stack tek kod tabanı ile geliştirme.
• Dezavantajlar:
  • Context API bazı senaryolarda çalışmaz.
  • Karmaşıklığı artırır; client/server ayrımı gerekir.
  • Bazen ekstra API endpoint gerekebilir.

4️⃣ RSC ve SSR Farkı