Digital Transformation
React Server Components (RSC)
Komponen React yang dirender di server, mengirim hasil terserialisasi ke browser tanpa membawa kode JavaScript komponen ke klien sehingga bundle lebih kecil dan halaman lebih cepat.
TL;DR: React Server Components (RSC) adalah jenis komponen React yang dieksekusi sepenuhnya di server. Hasilnya dikirim ke browser sebagai output yang sudah dirender, tanpa membawa kode JavaScript komponen tersebut ke klien. Efeknya: bundle lebih kecil, akses ke database atau filesystem langsung, dan halaman lebih cepat tampil.
Apa itu React Server Components?
React Server Components, sering disingkat RSC, adalah arsitektur komponen yang diperkenalkan tim React dan dipopulerkan lewat Next.js App Router. Komponen ditandai sebagai "server" secara default di App Router, lalu dieksekusi di server saat request datang. Hasil rendernya diserialisasi dan dikirim ke browser, sementara kode komponennya tetap di server. Kontras dengan komponen klien yang harus diunduh, di-parse, dan dieksekusi browser, RSC mengurangi pekerjaan di sisi pengguna. Konsep ini melengkapi praktik lain seperti streaming SSR dan progressive enhancement.
Cara Kerjanya
| Aspek | Server Component | Client Component |
|---|---|---|
| Dieksekusi di | Server | Browser |
| Kirim JS ke browser | Tidak | Ya |
| Akses DB/file langsung | Bisa | Tidak |
| State/effect | Tidak | Ya |
Server Component cocok untuk fetch data, render markdown, atau halaman read-heavy. Client Component dipakai saat butuh state, event handler, atau API browser.
Kenapa Penting?
Bagi tim Indonesia yang membangun produk dengan Next.js, RSC memangkas JavaScript yang harus diunduh pengguna dengan koneksi 4G terbatas. Bundle yang lebih kecil berarti [Core Web Vitals](/glosarium/cls) yang lebih baik, dan akses database langsung mengurangi lapisan API yang perlu dipelihara. Untuk tim engineering yang ingin developer experience baik tanpa mengorbankan performa pengguna, RSC adalah default modern yang masuk akal.
Pertanyaan Umum
Apakah RSC menggantikan SSR?
Tidak. RSC dan SSR saling melengkapi. SSR merender HTML awal, RSC menentukan mana komponen yang dirender di server tanpa hydration di klien.
Kapan harus pakai Client Component?
Saat butuh useState, useEffect, event handler (onClick, onChange), atau API browser seperti localStorage. Tandai dengan directive 'use client' di awal file.