Server Components vs Client Components di Next.js 16 — Belajar Next.js

🎯 Poin-Poin Utama Modul Ini:

Secara default seluruh komponen adalah React Server Components (RSC)
Gunakan direktif 'use client' hanya untuk komponen yang butuh State (useState), Effects (useEffect), atau Event Handlers (onClick)
Best practice memisahkan Client Boundaries agar bundle JavaScript tetap kecil

⚖️ Perbandingan Server Components vs Client Components

Fitur / Kebutuhan	Server Component (Default)	Client Component ('use client')
Fetch Data Database/API	✅ Direct (Kecepatan Tinggi)	⚠️ Membutuhkan API Endpoint / SWR
Akses Rahasia (API Keys/ENV)	✅ Aman di Server	❌ Berbahaya (Terekspos ke Browser)
Interaktivitas (onClick, onChange)	❌ Tidak Bisa	✅ Bawaan Browser
React State (useState, useEffect)	❌ Tidak Ada State	✅ Penuh Support

💡 Contoh Penggunaan Direktif 'use client'

components/CounterButton.tsx

"use client"; // Wajib ditambahkan di baris paling atas file!

import { useState } from "react";

export default function CounterButton() {
  const [count, setCount] = useState(0);

  return (
    <button 
      onClick={() => setCount(count + 1)}
      className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md"
    >
      Clicked {count} times
    </button>
  );
}