Digital Transformation
React Server Component (RSC)
TL;DR: React Server Component (RSC) adalah jenis komponen React yang dirender di server, datanya di-stream ke browser tanpa mengirim JavaScript komponen tersebut. Hasilnya bundle lebih kecil, waktu interaktif lebih cepat, dan akses data bisa langsung dari database tanpa lapisan API tambahan.
Apa itu React Server Component?
React Server Component adalah model komponen baru yang diperkenalkan tim React sejak 2020 dan diadopsi penuh oleh Next.js App Router pada 2023. Berbeda dari komponen client biasa, RSC dijalankan di server saat request masuk, lalu hasil rendernya dikirim sebagai payload terstruktur, bukan HTML statis dan bukan bundle JavaScript. Kombinasinya dengan komponen client memberi pengembang kontrol granular soal apa yang berjalan di mana, mirip prinsip SSR tapi lebih hemat resource karena tidak semua bagian halaman perlu hidrasi.
Analogi sederhananya: bayangkan dapur restoran. Server component adalah koki yang menyajikan piring siap makan. Client component adalah meja saji yang mengizinkan pelanggan menambah saus sesuai selera. Pelanggan tidak perlu lihat semua proses memasak, tapi tetap punya kontrol atas hidangan akhir.
Cara Kerja RSC
| Aspek | Server Component | Client Component |
|---|---|---|
| Lokasi render | Server (Node.js, Edge) | Browser |
| Bundle JavaScript | Tidak dikirim ke browser | Dikirim ke browser |
| Akses database | Langsung, aman | Lewat API |
| Interaktivitas | Tidak (no useState, no useEffect) | Ya |
| Penanda di Next.js | Default | "use client" di atas file |
Pola umum: gunakan RSC untuk fetching data berat dan layout statis, lalu pakai client component untuk bagian interaktif seperti form atau slider. Pola ini sering dikombinasikan dengan Server Action untuk handle mutasi.
Kenapa Penting untuk Marketer dan Pebisnis?
Bundle JavaScript yang besar adalah salah satu penyebab utama halaman lambat dan skor Core Web Vitals jeblok. RSC memangkas bundle dengan memindahkan logika rendering ke server. Untuk website bisnis Indonesia yang sering diakses dari koneksi 4G, ini berdampak nyata: time-to-interactive bisa turun, bounce rate ikut turun. Praktik standar di industri menunjukkan halaman dengan bundle di bawah 200 KB lebih konsisten lulus Web Vitals dibanding halaman 500 KB ke atas.
Pertanyaan Umum
Apakah React Server Component sama dengan SSR?
Tidak. SSR merender komponen di server lalu hidrasi semuanya di browser dengan JavaScript penuh. RSC tidak mengirim JavaScript komponennya, jadi tidak perlu hidrasi. SSR cocok untuk halaman yang banyak interaksi global, RSC cocok untuk konten dominan teks dan data.
Apakah saya harus pakai Next.js untuk pakai RSC?
Saat ini Next.js App Router adalah implementasi paling matang. Framework lain seperti Waku dan Remix sedang mengadopsi, tapi untuk produksi di 2026, Next.js masih opsi paling stabil.
Apakah RSC bisa pakai useState?
Tidak. RSC tidak punya state lokal atau lifecycle browser. Jika butuh state, ekstrak bagian itu ke client component terpisah.