RSC (React Server Components)

TL;DR: React Server Components atau RSC adalah arsitektur React yang merender komponen di server tanpa mengirim JavaScript komponen tersebut ke browser. Hasilnya bundle client lebih kecil, TTFB lebih cepat, dan akses data bisa langsung dari server tanpa API layer. Next.js App Router memakai RSC sebagai default sejak versi 13.

Apa itu RSC?

React Server Components adalah jenis komponen React baru yang dieksekusi sepenuhnya di server. Hasil render dikirim ke browser dalam bentuk stream khusus, bukan JavaScript. Karena kode komponen tidak dikirim ke browser, bundle JavaScript berkurang signifikan, terutama untuk komponen yang hanya butuh fetch data dan render markup.

Berbeda dengan SSR klasik yang tetap mengirim JS untuk hidrasi, RSC tidak butuh hidrasi sama sekali untuk bagian server-only. Komponen interaktif tetap pakai client components yang ditandai 'use client'.

Kapan Pakai RSC vs Client Component?

Dukungan stabil di Next.js 15 dengan App Router. Lihat dokumentasi resmi React Server Components.

Kenapa Penting?

Berdasarkan praktik yang Vito Atmo pakai di proyek Atmo LMS dan portfolio personal brand, migrasi dari Pages Router ke App Router dengan RSC memangkas bundle JavaScript halaman utama dari 280 KB ke 95 KB. LCP ikut turun 18 persen. Untuk situs Indonesia yang banyak diakses lewat koneksi 4G lemot, dampak ini langsung terasa di metrik bisnis seperti bounce rate dan conversion rate.

Pertanyaan Umum

Apakah RSC menggantikan SSR?

Tidak. RSC melengkapi SSR. SSR tetap dipakai untuk render initial HTML, sementara RSC menentukan komponen mana yang dikirim sebagai JS dan mana yang tidak.

Apakah bisa pakai useState di RSC?

Tidak. Hooks state hanya bekerja di Client Components. RSC fokus ke fetching data dan rendering markup tanpa interaktivitas.