React Server Components: Cara Tim Marketing dan Developer Indonesia Mempercepat Halaman Tanpa Mengorbankan Interaksi

TL;DR: React Server Components (RSC) adalah arsitektur Next.js 15 yang menjalankan komponen di server tanpa mengirim JavaScript-nya ke browser. Untuk tim marketing dan developer Indonesia, ini menurunkan bundle size hingga 30-50% pada halaman content-heavy, tanpa mematikan interaksi karena komponen interaktif tetap dirender sebagai Client Component. Trade-off-nya: kurva belajar dan disiplin batas server-client.

Banyak tim Indonesia memperlakukan halaman marketing seperti aplikasi React utuh: semua dirender di client, bundle JavaScript membengkak, INP berantakan. Dalam beberapa proyek terakhir, saya melihat halaman landing yang membawa 400-600 KB JavaScript hanya untuk menampilkan teks dan tiga tombol. Dengan migrasi ke React Server Components, bundle bisa turun ke 80-150 KB tanpa kehilangan fitur form dan analytics.

Artikel ini membahas kapan RSC tepat dipakai, kapan tidak, dan bagaimana memetakan komponen ke pola server atau client. Acuan utama: dokumentasi resmi React tentang Server Components dan panduan App Router Next.js.

Bedanya Server Component dan Client Component

Server Component dirender di server, hasilnya berupa payload yang sudah di-serialize. Tidak ada JavaScript komponen tersebut yang dikirim ke browser. Cocok untuk konten statis, fetching data, dan komponen layout. Client Component ditandai dengan direktif "use client" di awal file. Komponen ini di-hydrate di browser, mendukung state, event handler, dan hook seperti useState atau useEffect. Perbedaan ini memengaruhi bagaimana Anda mengorganisasi codebase: semua komponen default Server Component, dan Client Component hanya dipakai bila benar-benar perlu interaksi browser. Kalau Anda baru mulai dengan App Router, mulai dari pemahaman streaming SSR yang melengkapi pola RSC.

Pemetaan Komponen ke Pola yang Benar

Pola yang sehat adalah Server Component sebagai pembungkus dan Client Component sebagai island kecil di dalamnya. Jangan jadikan halaman utuh sebagai Client Component hanya karena ada satu tombol interaktif. Hubungkan dengan [link equity dari struktur internal](/artikel/link-equity-internal-link-strategi-marketer-indonesia) saat merancang layout pillar.

Studi Kasus: Migrasi vitoatmo.com

Saat membangun vitoatmo.com versi 2026, halaman home awalnya satu komponen besar yang ditandai "use client". Bundle awal 380 KB. Setelah memecah komponen jadi Server Component (Hero, Work, Pricing, FAQ) dan Client Component (Navbar dengan scroll spy, form kontak), bundle turun ke 110 KB. INP yang sebelumnya 230 ms turun ke 90 ms pada perangkat menengah. Praktik ini sejalan dengan INP optimization untuk website bisnis yang sudah saya bahas di artikel terpisah.

Kapan Tidak Pakai RSC?

Tidak semua proyek diuntungkan RSC. Aplikasi internal yang heavy state (dashboard analitik, editor) lebih sederhana sebagai SPA biasa. Tim kecil yang belum kenal pola server-client bisa terpeleset di edge case seperti context provider yang harus berada di Client Component. Untuk situs yang sebagian besar interaktif, SSR vs static bisa jadi pertimbangan lebih dulu.

Pertanyaan Umum

Apakah RSC menggantikan SSR?

Tidak. RSC adalah lapisan di atas SSR. Server Component dirender di server (bisa di build time atau request time), sementara SSR adalah teknik pengiriman HTML siap pakai ke browser. RSC menambah opsi tidak mengirim JavaScript komponen tersebut sama sekali.

Apakah Server Component bisa pakai useState?

Tidak. Hook seperti useState, useEffect, dan useRef hanya tersedia di Client Component. Kalau perlu interaksi, pisah komponen kecil yang interaktif dan tandai dengan "use client".

Berapa lama belajar RSC dari pola SPA biasa?

Berdasarkan pengalaman tim yang saya bantu, developer dengan dasar React solid butuh 2-4 minggu untuk nyaman dengan batas server-client, terutama soal data passing dan boundary error.

Penutup: Disiplin Boundary, Bukan Sekadar Migrasi

RSC bukan tombol ajaib. Manfaat sebenarnya datang dari disiplin: identifikasi mana yang interaktif, mana yang statis, lalu hormati batas itu. Ketika tim marketing menulis brief halaman dan tim developer membangunnya, kerangka Server-Client membantu kedua belah pihak bicara dalam bahasa yang sama: "ini interaktif" atau "ini sekadar tampilan". Kalau Anda baru memulai, audit halaman terbesar dulu, ukur bundle dengan Lighthouse, lalu pisah satu Client Component kecil pertama. Hasilnya akan kelihatan sebelum minggu kedua.