Server vs Client Component
Kapan memakai "use client" dan kapan tidak.
Dua jenis komponen
| Server Component | Client Component | |
|---|---|---|
| Cara membuat | Bawaan (tanpa tulisan apa pun) | Tulis "use client" di baris pertama |
| Berjalan di | Server | Browser (dan server saat pertama) |
Bisa useState, onClick | Tidak | Ya |
| Cocok untuk | Menampilkan data, halaman biasa | Tombol, form, hal interaktif |
Contoh Client Component
"use client";
import { useState } from "react";
export default function Counter() {
const [jumlah, setJumlah] = useState(0);
return (
<div>
<p>Jumlah: {jumlah}</p>
<button onClick={() => setJumlah(jumlah + 1)}>Tambah</button>
</div>
);
}Penjelasan baris demi baris
"use client"— memberi tahu Next.js bahwa file ini interaktif.useState(0)— membuat "ingatan" bernilai awal 0.setJumlah(jumlah + 1)— mengubah nilai, tampilan ikut berubah.
Tips: mulai dengan Server Component. Pakai "use client" hanya pada komponen kecil yang benar-benar perlu interaksi.