React Server Component untuk Personal Brand: Bundle Ringan, LCP Cepat 2026

TL;DR: React Server Component (RSC) memindahkan render komponen ke server tanpa mengirim JavaScript-nya ke browser. Untuk website personal brand yang isinya dominan konten dan biodata, ini memangkas bundle 30-60% di pengalaman saya, sehingga skor LCP dan INP membaik tanpa kompromi pengalaman pengembangan.

Dua bulan terakhir saya migrasikan tiga website personal brand klien dari Pages Router Next.js ke App Router dengan RSC. Pola yang konsisten muncul: halaman About yang sebelumnya kirim 280 KB JavaScript bisa turun ke 90-110 KB. Halaman work atau portfolio yang berisi banyak gambar dan deskripsi proyek bahkan turun lebih drastis, sekitar 70%.

Yang menarik, perbedaannya paling terasa di koneksi 4G normal Indonesia. Lighthouse dari Lighthouse Lab boleh saja menunjukkan angka cantik, tapi data lapangan dari Chrome User Experience Report (CrUX) yang menentukan apakah Google mempercayai halaman kita layak naik ranking.

Kenapa Bundle JavaScript Jadi Beban di Personal Brand

Personal brand di Indonesia umumnya konsumtif: pengunjung scroll hero, baca biodata, lihat testimoni, klik kontak. Interaksi berat hanya di form kontak dan mungkin filter portfolio. Tapi tooling tradisional, misalnya Pages Router dengan getServerSideProps, tetap kirim seluruh kode halaman sebagai JavaScript yang harus dihidrasi browser. Pengunjung "membayar" bandwidth dan waktu CPU untuk fitur yang tidak mereka pakai.

React Server Component membalik ini. Komponen yang tidak butuh interaktivitas berjalan di server, hasilnya di-stream sebagai payload terstruktur. Hanya komponen yang butuh state atau event handler (form, dropdown, modal) yang dibungkus "use client" dan ikut bundle.

Framework Migrasi: Layered Audit

Berikut framework yang saya pakai saat migrasi klien personal brand ke RSC:

Prinsip kunci: dorong "use client" ke daun pohon komponen sejauh mungkin. Banyak developer salah membungkus parent layout dengan "use client", lalu semua child ikut jadi client component otomatis.

Studi Kasus Yuanita Sekar: Personal Branding + ATS-Ready CV

Saat membangun Yuanita Sekar, tantangannya menggabungkan halaman branding dengan halaman CV yang harus printable. CV awalnya dibuat client-side karena perlu state untuk toggle section. Setelah audit, ternyata 80% halaman tidak butuh interaksi sama sekali. Saya ekstrak toggle ke komponen <CVSectionToggle /> kecil dengan "use client", sementara seluruh layout, header, dan content tetap server component.

Hasil: bundle JavaScript halaman CV turun dari 235 KB ke 89 KB. Skor LCP di simulasi 4G turun dari 3,1 detik ke 1,7 detik. Yang lebih penting, halaman tetap interaktif untuk fitur toggle, jadi pengalaman pengguna tidak berkurang.

Pola serupa saya terapkan di Felicia Tan dan Ade Mulyana. Tiga website, satu pola, hasil konsisten.

Sinyal Lain yang Ikut Membaik

Setelah migrasi, tiga metrik sekunder ikut naik:

1. Server Action lebih natural. Form kontak yang sebelumnya pakai API route bisa dipindah ke Server Action, mengurangi boilerplate dan request bolak-balik.
2. Database query langsung di komponen. RSC bisa akses Supabase atau Prisma tanpa API layer, sehingga waktu render lebih pendek.
3. SEO lebih bersih. Tidak ada flicker hidrasi, Core Web Vitals lebih stabil.

Pertanyaan Umum

Apakah migrasi ke RSC butuh rewrite total?

Tidak. Next.js mendukung Pages Router dan App Router berdampingan di satu proyek. Migrasi bisa per route, mulai dari halaman dengan trafik tertinggi.

Bagaimana dengan library yang masih pakai useEffect?

Library seperti animasi atau slider yang butuh DOM tetap pakai client component. Bungkus mereka di leaf, jangan paksa migrasi.

Apakah Vercel satu-satunya hosting yang support RSC?

Tidak. Self-host Next.js dengan Node.js juga support penuh. Edge runtime di Vercel hanya menambah opsi lokasi eksekusi yang lebih dekat ke user.

Apakah RSC menambah biaya server?

Sedikit, karena lebih banyak render terjadi di server. Tapi pengurangan bandwidth ke client dan caching agresif via Caching Strategy Next.js biasanya menutupi selisih biaya.

Saya bukan developer, kenapa ini relevan untuk saya?

Karena performa adalah faktor ranking SEO dan faktor konversi. Memilih developer atau template yang sudah mengadopsi RSC sejak awal menghemat refactor 6-12 bulan ke depan.

Aplikasi Praktis Mulai Minggu Ini

Audit website personal brand Anda dengan PageSpeed Insights. Jika JavaScript transfer di atas 200 KB dan ada keluhan halaman lambat di mobile, ini sinyal kuat layer client terlalu tebal. Mulai dari komponen paling sering muncul (header, footer, kartu testimoni) dan tanya: apakah benar-benar butuh state? Jika tidak, biarkan jadi server component. Otoritas personal brand dibangun di setiap detik halaman yang berhasil dimuat tepat waktu, bukan di klaim "website cepat" tanpa bukti angka.