📌 Next.js – Bileşenler (Components)

Next.js 13+ App Router mimarisi, bileşenleri Server Component ve Client Component olarak ayırır. Bu ayrım, performans ve veri yönetimi açısından önemlidir.

1️⃣ Server Component

• App Router’daki page.tsx ve layout.tsx dosyaları default olarak Server Component’tir.
• Hook kullanımı sınırlıdır: useState, useEffect gibi Client Hooks çalışmaz.
• Avantaj: Sunucu tarafında veri çekme ve render işlemi yapılır, HTML direkt olarak tarayıcıya gönderilir.

// page.tsx
export default async function CabinPage({ params }) {
  const cabin = await getCabin(params.cabinId); // Sunucuda fetch
  return <div>{cabin.name}</div>;
}

💡 İpucu: Eğer hook veya state kullanmanız gerekiyorsa, ilgili bileşeni client component olarak işaretleyin.

2️⃣ Client Component

• use client direktifi ile tanımlanır.
• Client tarafında interaktif bileşenler oluşturmak için kullanılır.
• Server Component child’ı olabilir ama Server Component Client Component içine alınamaz.

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

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3️⃣ Loader (Global Yükleyici)

• App içine loader.js veya loader.tsx ekleyerek global loading state oluşturabilirsiniz.
• Layout veya page render edilmeden önce gösterebilirsiniz.

// app/loader.js
export default function Loader() {
  return <div className="spinner">Loading...</div>;
}