Server Components vs Client Components

Penjelasan

Di App Router, SEMUA komponen SECARA DEFAULT adalah Server Component — dirender sepenuhnya DI SERVER, hasilnya berupa HTML biasa yang dikirim ke browser tanpa JavaScript tambahan. Kalau komponen butuh interaktivitas browser (useState, useEffect, onClick, dst), WAJIB ditandai 'use client' di baris paling atas file, baru jadi Client Component yang dijalankan juga di browser.

Contoh Konsep

// app/page.js — Server Component (default, TIDAK butuh 'use client')
export default function Beranda() {
    return <h1>Halaman ini dirender di server</h1>;
}

// components/Counter.js — Client Component, BUTUH interaktivitas
'use client';
import { useState } from 'react';

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

Praktikum

Buat komponen SaklarLampu yang memakai useState untuk toggle boolean nyala. Tambahkan directive yang WAJIB ada di baris pertama supaya komponen ini bisa dijalankan sebagai Client Component.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

'use client' menandai BATAS antara server dan client — begitu satu file ditandai 'use client', SEMUA komponen yang di-import olehnya (turunannya) juga otomatis ikut jadi bagian dari Client Component tree, meski file turunan itu sendiri tidak ditandai. Sebaiknya taruh 'use client' SEDEKAT MUNGKIN ke komponen yang benar-benar butuh interaktivitas, jangan di komponen besar yang membungkus banyak hal.