Next.js vs. React: Mimariyi Anlamak ve Doğru Seçim Yapmak

Her Biri Ne Yapar?

React (Kütüphane):                 Next.js (Framework):
────────────────────                ────────────────────────────────
✓ UI-Komponenten                    ✓ React'ten her şey
✓ State Management                  ✓ File-based Routing
✓ Hooks                             ✓ Server Components (RSC)
✗ Routing (kendin seç)           ✓ Server-side Rendering (SSR)
✗ Server-Rendering                  ✓ Static Site Generation (SSG)
✗ Görsel optimizasyonu                 ✓ API Routes + Görsel optimizasyonu

Render Stratejilerinin Karşılaştırması

Strateji      Ne zaman render?    Ne zaman güncellenir?         Use Case
──────────────────────────────────────────────────────────────────
SSG (Static)   Build zamanı       Yeni build     Blog, Docs
ISR            Build + Interval  X saniye sonra   Ürün listesi
SSR            Her istek    Her istek   Dashboard
RSC (Server)   Her istek    İsteğe bağlı      Varsayılan
Client Comp.   Tarayıcı          İsteğe bağlı      Etkileşimli

Server Component vs. Client Component

// Server Component (Next.js App Router'da varsayılan)
// "use client" YOK → sunucuda çalışır

async function BlogPage() {
    // Sunucuda doğrudan DB/API erişimi
    const posts = await fetch('https://api.example.com/posts', {
        next: { revalidate: 3600 }  // ISR: saatlik yeniden doğrulama
    }).then(r => r.json());

    return (
        <div>
            {posts.map((post: Post) => (
                <article key={post.id}>
                    <h2>{post.title}</h2>
                    <p>{post.excerpt}</p>
                </article>
            ))}
        </div>
    );
}

// Client Component – yalnızca gerektiğinde
"use client";

export function SearchBar() {
    const [query, setQuery] = useState('');

    return (
        <input
            value={query}
            onChange={e => setQuery(e.target.value)}
            placeholder="Ara..."
        />
    );
}

Veri Çekme: useEffect vs. Server Component

// React (useEffect deseni) – tarayıcıda
function ProductList() {
    const [products, setProducts] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        fetch('/api/products')
            .then(r => r.json())
            .then(data => { setProducts(data); setLoading(false); });
    }, []);

    if (loading) return <Spinner />;
    return <ProductGrid products={products} />;
}

// Next.js (Server Component) – sunucuda
async function ProductList() {
    const products = await getProducts(); // Loading state'e gerek yok!
    return <ProductGrid products={products} />;
}

// Streaming için Suspense
export default function Page() {
    return (
        <Suspense fallback={<ProductSkeleton />}>
            <ProductList />   {/* Veri gelene kadar iskelet */}
        </Suspense>
    );
}

Ne Zaman React, Ne Zaman Next.js?

Saf React (+ Vite) seç eğer:
──────────────────────────────────
✓ Giriş arkasında Single-Page App (SPA)
✓ SEO önemli değil
✓ Maksimum özgürlük isteniyorsa
Örnekler: Admin paneli, dahili araçlar

Next.js seç eğer:
────────────────────
✓ SEO önemli (landing page, blog, e-ticaret)
✓ İlk yüklenme süresi minimal olmalı
✓ API Route'larla full-stack isteniyorsa
✓ Çok sayfalı büyük uygulama
Örnekler: Kurumsal web sitesi, SaaS, e-ticaret

Performans Karşılaştırması

Pratikte tipik değerler:

• First Contentful Paint: React CSR ~2,5s | Next.js SSR ~0,5s | SSG ~0,2s
• Time to Interactive: React CSR ~3,5s | Next.js SSR ~1,5s | SSG ~0,5s
• Bundle boyutu: React CSR 300-500 KB | Next.js RSC 80-150 KB | SSG 30-80 KB
• SEO skoru: React CSR orta | Next.js SSR çok iyi | SSG mükemmel