React Server Components (RSC)

TL;DR: React Server Components (RSC) adalah jenis komponen React yang dijalankan di server dan hasilnya dikirim sebagai output siap pakai, tanpa menyertakan kode JavaScript komponen tersebut ke browser. Efeknya, ukuran bundle berkurang dan halaman lebih cepat siap dipakai, terutama pada aplikasi besar.

Apa itu React Server Components?

React Server Components adalah komponen yang dieksekusi sepenuhnya di server. Berbeda dari komponen client biasa, RSC tidak mengirim logika JavaScript-nya ke browser, hanya hasil renderingnya. Analoginya seperti menerima makanan jadi alih-alih bahan mentah plus resep. Pendekatan ini menjadi fondasi App Router di Next.js dan terkait erat dengan server components sebagai konsep umum.

RSC sering dipadukan dengan streaming SSR supaya bagian halaman bisa muncul bertahap, memperbaiki LCP tanpa menunggu seluruh data siap.

Cara Kerja Singkat

• Komponen server mengambil data langsung (database, API) tanpa lapisan fetch di client.
• Output dikirim ke browser sebagai deskripsi UI, bukan bundle JS komponen.
• Komponen interaktif tetap ditandai sebagai client component dan di-hidrasi seperti biasa.

Kenapa Penting?

Untuk situs konten dan dashboard yang berat, memindahkan komponen non-interaktif ke server adalah salah satu cara paling langsung memangkas JavaScript yang dikirim ke pengunjung. Pada portfolio dan situs bisnis berbasis Next.js yang saya bangun, memisahkan komponen server dan client dengan tegas membuat bundle awal jauh lebih ramping. Dokumentasi resmi tersedia di React Server Components.

Pertanyaan Umum

Apakah RSC menghapus kebutuhan client component?

Tidak. Komponen yang butuh interaksi (state, event, efek browser) tetap harus jadi client component. RSC melengkapi, bukan menggantikan.

Apakah RSC sama dengan SSR?

Tidak persis. SSR merender HTML di server lalu di-hidrasi. RSC lebih jauh: komponen server tidak pernah mengirim JS-nya ke browser sama sekali.