Digital Transformation
React Server Components (RSC)
TL;DR: React Server Components adalah komponen React yang dirender di server tanpa mengirim JavaScript-nya ke browser, memungkinkan halaman lebih cepat dan akses langsung ke database tanpa API tambahan. Next.js 13 ke atas menggunakan RSC sebagai default di App Router.
Apa itu React Server Components?
React Server Components (RSC) adalah jenis komponen React yang dieksekusi sepenuhnya di server. Berbeda dari Client Components, kode RSC tidak dikirim ke browser sehingga bundle JavaScript lebih kecil. RSC bisa langsung query database, baca file, atau panggil API eksternal tanpa perlu route API perantara.
Konsep ini berbeda dari Server-Side Rendering (SSR) klasik. SSR me-render HTML di server lalu hydration di client dengan semua JavaScript dikirim. RSC tidak butuh hydration karena komponen memang tidak interaktif di client. Komponen yang butuh interaksi tetap pakai Client Components, ditandai directive "use client". Kombinasi RSC dan React Server Actions memungkinkan arsitektur full-stack React dengan minimal API surface.
Perbedaan RSC vs Client Component
| Aspek | Server Component | Client Component |
|---|---|---|
| Tempat render | Server | Browser (setelah hydration) |
| Akses database | Bisa langsung | Harus via API route |
| State (useState) | Tidak bisa | Bisa |
| Event handler (onClick) | Tidak bisa | Bisa |
| Bundle size | Tidak nambah | Nambah ke bundle client |
| Streaming | Native via Suspense | Terbatas |
Kenapa Penting bagi Marketer Indonesia?
Marketer yang punya website Next.js bisa memanfaatkan RSC untuk halaman katalog produk atau artikel blog, sehingga LCP (Largest Contentful Paint) turun signifikan. Berdasarkan praktik di proyek client e-commerce, migrasi dari Pages Router ke App Router dengan RSC menurunkan TTI (Time to Interactive) sebesar 30 sampai 50 persen. Komponen pendukungnya adalah middleware dan edge runtime.
Referensi resmi: Next.js Documentation tentang Server Components.
Pertanyaan Umum
Apakah RSC menggantikan SSR?
Tidak sepenuhnya. RSC merupakan model rendering baru di atas SSR. Sebuah halaman bisa menggabungkan RSC, Client Component, dan SSR tradisional.
Apakah RSC bisa pakai useState atau useEffect?
Tidak. RSC tidak punya state browser. Kalau butuh interaksi, pisahkan ke Client Component dengan directive "use client" di atas file.