Apa itu React Server Components dan bagaimana mereka berbeda dari komponen klien?

Question

Accepted Answer

**Server Components (RSC)** merender pada **server** dan mengirim hasil terserialisasi ke browser. Mereka mengirimkan **nol JavaScript** untuk diri mereka sendiri — hanya data/markup, bukan kodenya. ## Dua jenis ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Kemampuan dan batasan | | Server Component | Client Component | |---|---|---| | Dapat `await` / mengambil data secara langsung | ✅ | ❌ | | Akses sumber daya/rahasia server | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Mengirim JS ke browser | ❌ (nol) | ✅ | ## Mengapa ini penting - **JavaScript klien lebih sedikit** → pemuatan dan interaktivitas lebih cepat. - **Pengambilan data di samping sumber** (tidak ada round-trip API dari browser, tidak ada paparan kredensial DB). - Anda dapat **mengomposisinya**: komponen server merender komponen klien untuk "pulau" interaktif. Komponen server dapat merender satu klien, tetapi **tidak** sebaliknya. ## Gotcha Props yang dilewatkan di seluruh batas server→klien harus **dapat diserialisasi** — Anda tidak dapat melewatkan fungsi atau instance kelas. RSC mengubah model mental dari "semuanya berjalan di browser" menjadi "render di server secara default, pilih masuk ke klien hanya di mana Anda memerlukan interaktivitas."

	Server Component	Client Component
Dapat `await` / mengambil data secara langsung	✅	❌
Akses sumber daya/rahasia server	✅	❌
`useState`/`useEffect`/events	❌	✅
Mengirim JS ke browser	❌ (nol)	✅