Memahami React Server Components (RSC): Jangan Salah Taruh 'use client'

Paradigma Baru yang Memusingkan Veteran React

Jika kamu sudah lama menggunakan React, kamu terbiasa dengan fakta bahwa seluruh komponenmu di-render di dalam Browser milik pengunjung. Kamu bebas menggunakan useState, onClick, dan useEffect di mana saja.

Namun, dengan dirilisnya arsitektur React Server Components (RSC) yang dipelopori oleh Next.js (melalui App Router), segalanya berubah total. Kini, komponen React dibelah menjadi dua kasta: Server Components dan Client Components.

1. Server Components (Kasta Default)

Secara bawaan (Default), setiap file komponen baru yang kamu buat di Next.js modern adalah sebuah Server Component. Komponen ini TIDAK PERNAH DIKIRIM KE BROWSER PENGUNJUNG.

• Cara Kerja: Komponen ini hidup, dieksekusi, dan dirakit secara eksklusif di dalam Komputer Server (Backend). Yang dikirim ke layar pengunjung hanyalah hasil akhir berupa file HTML mati yang super ringan.
• Kehebatan: Karena komponen ini berjalan di server, kamu bisa langsung melakukan query ke Database (seperti SQL/Prisma) langsung di dalam komponen React! Tidak perlu lagi repot-repot membuat file API eksternal (REST API).
• Larangan Keras: Karena komponen ini tidak ada di browser, kamu DILARANG KERAS menggunakan hal-hal yang bersifat interaktif (*browser-only*) seperti useState, onClick, atau memanggil window.localStorage. Kodemu akan *error*!

2. Client Components (Kasta Interaktif)

Bagaimana jika kamu butuh membuat tombol interaktif seperti "Like" atau "Dark Mode Toggle"? Kamu harus menggunakan Client Component.

Untuk mengubah Server Component menjadi Client Component, kamu wajib menuliskan "mantra" sakti di baris paling pertama (paling atas) file JavaScript-mu:

'use client';

import { useState } from 'react';

export default function TombolLike() {
  const [likes, setLikes] = useState(0);
  return <button => setLikes(likes + 1)}>Like ({likes})</button>;
}

Aturan Emas Merakitnya

Mulai sekarang, berpikirlah seperti ini: Gunakan Server Components sebanyak-banyaknya (untuk artikel, tata letak, dan pembacaan data database). Lalu, selipkan Client Components KECIL 'use client' hanya di bagian-bagian spesifik yang butuh diklik atau memiliki animasi (seperti Slider gambar atau Form Input). Ini akan membuat *bundle* JavaScript-mu mengecil drastis dan websitemu melesat sangat cepat!