Digital Transformation
React Server Components (RSC)
React Server Components adalah jenis komponen React yang dirender di server tanpa mengirim JavaScript-nya ke browser, sehingga halaman jadi lebih ringan dan cepat.
TL;DR: React Server Components (RSC) adalah komponen React yang dieksekusi sepenuhnya di server. Browser hanya menerima hasil render dalam bentuk payload kecil, bukan kode JavaScript komponen. Hasilnya: bundle JS lebih kecil, akses langsung ke database/file system, dan halaman lebih cepat di mobile.
Apa itu React Server Components?
React Server Components, sering disingkat RSC, adalah model komponen React yang berjalan di server dan tidak ikut dikirim ke browser sebagai JavaScript. Berbeda dengan Server-Side Rendering klasik yang tetap hydrate seluruh komponen di klien, RSC tidak dihidupkan ulang di sisi pengguna. Komponen interaktif tetap ditangani Client Components terpisah yang ditandai dengan direktif 'use client'. Pendekatan ini banyak dipakai sejak Next.js 13 App Router dan menjadi default di Next.js 14 dan 15.
Cara Kerja Singkat
Server menerima request, menjalankan komponen Server, mengambil data langsung (misalnya query Postgres), kemudian mengirim hasil render dalam format RSC payload ke browser. Browser merangkainya dengan Client Components yang sudah di-hydrate. Tabel di bawah memperjelas perbedaannya:
| Aspek | Server Component | Client Component |
|---|---|---|
| Eksekusi | Hanya di server | Server (SSR) + browser |
| Akses DB/secret | Aman | Tidak boleh |
| Bundle JS browser | Tidak ada | Ada |
| Interaktivitas (state, effect) | Tidak | Ya |
| Default Next.js App Router | Ya | Pakai 'use client' |
Kenapa Penting untuk Marketer-Developer Indonesia?
Trafik dari Indonesia banyak datang dari perangkat mid-range dan jaringan 4G. Setiap KB JavaScript yang tidak dikirim ke browser berarti waktu parsing lebih singkat, INP lebih sehat, dan biaya data pengunjung lebih ringan. Di proyek Atmo (LMS) dan vitoatmo.com sendiri, memindahkan komponen non-interaktif (header artikel, daftar glosarium, footer) ke Server Components memangkas ukuran initial JS secara signifikan, dengan kisaran 30 sampai 60 persen tergantung halaman. Detail teknis resmi dapat dibaca di dokumentasi React tentang Server Components.
Pertanyaan Umum
Apakah RSC menggantikan SSR?
Tidak. RSC bekerja berdampingan dengan SSR dan Client Components. SSR tetap menghasilkan HTML awal, sementara RSC menentukan apakah komponen perlu mengirim JS ke browser atau tidak.
Bisakah RSC dipakai tanpa Next.js?
Secara teori bisa, namun adopsi paling matang ada di Next.js App Router dan beberapa framework seperti Waku. Untuk bisnis di Indonesia yang ingin hosting di Vercel, jalur paling cepat adalah Next.js 15.