LearnNext
Back to Dashboard

Components & RSC

Memahami perbedaan mendalam antara Server Components dan Client Components di era App Router.

1. React Server Components (RSC)

Secara default, semua komponen di dalam direktori `app` adalah **Server Components**. Mereka dirender di server dan mengirimkan HTML minimal ke client tanpa beban JavaScript tambahan.

Gunakan Server Components untuk:
  • • Mengambil data (Data fetching) langsung dari database.
  • • Menyimpan data sensitif (API keys, tokens).
  • • Menjaga bundle JavaScript client tetap kecil.
  • • SEO yang lebih baik dan loading cepat.
Tidak Bisa Digunakan untuk:
  • • Interaktivitas (onClick, onChange, dll).
  • • State management (useState, useReducer).
  • • Browser APIs (window, localStorage).
  • • Lifecycle effects (useEffect).
app/components/ServerComponent.tsx
// Ini adalah Server Component secara default
export default async function MyServerComponent() {
  const data = await fetch('https://api.example.com/data');
  const items = await data.json();

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

2. Client Components

Gunakan direktif "use client" di baris paling atas file untuk menandai komponen sebagai Client Component. Ini memungkinkan Anda menggunakan hooks dan event listeners.

components/Counter.tsx
"use client"; // Wajib ditambahkan di paling atas

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Count is: {count}
    </button>
  );
}

Interactive Demo: The Boundary

Coba berinteraksi dengan simulasi di bawah ini untuk melihat bagaimana data mengalir antara Server dan Client.

Server Environment

📦 Server Component

"Saya mengambil data dari database dan merendernya menjadi HTML statis."

<div>Static Data from DB</div>
Passing Props down...
Client Environment

🖱️ Client Component"use client"

"Saya bisa menangani klik dan menyimpan state di browser!"

React State updated in browser memory

Visualisasi: Server mengirimkan HTML + Boundary Marker. Client kemudian melakukan Hydration untuk membuat komponen interaktif.

Tips Pro: Leaf Components

Usahakan untuk membuat Client Components se-kecil mungkin dan taruh di bagian paling "ujung" (leaf) dari pohon komponen Anda agar sebagian besar aplikasi tetap dirender di server.