Digital Transformation
React Server Components (RSC)
TL;DR: React Server Components (RSC) adalah komponen React yang dieksekusi sepenuhnya di server dan tidak mengirim JavaScript ke browser. Hasilnya, halaman tampil lebih cepat dan bundle JavaScript mengecil signifikan, sering 30-60% dibanding pendekatan client-side biasa.
Apa itu React Server Components?
React Server Components adalah model rendering baru dari tim React yang menjadi default di Next.js App Router. Berbeda dengan komponen client biasa, RSC dirender di server, lalu hasilnya berupa output HTML plus serialized React tree yang dikirim ke browser. Browser hanya menerima hasil, bukan kode komponennya, sehingga JavaScript yang harus diparse dan dieksekusi jauh lebih sedikit.
Analogi sederhananya, RSC seperti chef yang memasak makanan di dapur restoran lalu mengantarnya ke meja Anda, sementara komponen client tradisional seperti mengirim bahan mentah plus resep dan Anda yang harus memasak sendiri di meja makan.
Cara Kerja dan Batasannya
| Aspek | Server Component (default) | Client Component ("use client") |
|---|---|---|
| Lokasi eksekusi | Server | Browser pengguna |
| Akses ke DB/file system | Boleh | Tidak boleh |
Bisa pakai useState, useEffect | Tidak | Bisa |
| Event handler (onClick) | Tidak | Bisa |
| Dikirim ke browser sebagai JS | Tidak | Ya |
RSC otomatis aktif untuk semua file di folder app/ Next.js. Anda baru perlu menambahkan directive "use client" di atas file jika komponen butuh state, efek, atau interaktivitas. Praktik umum: bungkus pohon komponen dengan RSC di luar dan client component hanya di pulau-pulau interaktif (island architecture).
Kenapa Penting untuk Marketer Indonesia?
Bandwidth dan ketersediaan device entry-level di Indonesia masih sangat bervariasi. Praktik di lapangan menunjukkan halaman dengan bundle JS di bawah 100 KB punya bounce rate 20-35% lebih rendah dibanding halaman 300 KB ke atas pada koneksi 3G. RSC memotong beban itu di sumbernya, sehingga marketer bisa rilis halaman kaya komponen (katalog, dashboard, blog) tanpa mengorbankan kecepatan. Dari pengalaman menangani LMS Atmo dan Vetmo, pindah ke RSC memangkas First Load JS sekitar 40% di halaman katalog.
Pertanyaan Umum
Apakah RSC menggantikan SSR?
Tidak. RSC bekerja di atas SSR dan SSG. Server tetap merender HTML, tapi kini bisa memilih komponen mana yang tidak perlu mengirim JS sama sekali ke browser.
Bisakah RSC pakai useEffect atau useState?
Tidak. Hooks state dan efek hanya jalan di client component. Untuk data fetching, RSC pakai async/await langsung di body komponen.
Istilah Terkait