Mengenal React Server Components (RSC) & Cara Kerjanya

Era Baru Pemrograman Frontend dengan React Server Components

Dalam beberapa tahun terakhir, React Server Components (RSC) telah menjadi topik hangat di dunia pengembangan web. RSC membawa perubahan fundamental tentang bagaimana kita merancang dan memuat aplikasi React.

Sebelum RSC, semua komponen React adalah Client Components—artinya komponen tersebut dikirimkan ke browser dan dieksekusi di sisi klien menggunakan JavaScript, meskipun halaman pertama kali dirender di server (SSR).

Apa itu React Server Components?

Secara sederhana, React Server Components (RSC) adalah komponen React yang dieksekusi secara eksklusif di server. Kode komponen ini tidak pernah dikirim ke browser pengguna.

Hanya hasil akhir dalam bentuk representasi UI (mirip dengan format JSON yang dioptimalkan) yang dikirim ke browser, lalu digabungkan dengan komponen interaktif klien tanpa perlu memuat ulang halaman.

Berikut adalah ilustrasi perbedaan perilakunya:

Keuntungan Utama Menggunakan RSC

1. Performa Loading Lebih Cepat: Karena komponen dijalankan di server, kita dapat memuat data langsung dari database terdekat. Data tidak perlu melintasi jaringan internet publik berulang kali (menghindari masalah waterfall fetch).
2. Ukuran Bundle JavaScript Lebih Kecil: Library pihak ketiga yang besar (seperti library pemformatan tanggal date-fns atau parser markdown) yang hanya digunakan di server tidak akan masuk ke bundle JavaScript pengguna di browser.
3. SEO & Keterbacaan Mesin Pencari: Konten halaman sudah terisi penuh sejak awal dari server, memudahkan mesin pencari (Googlebot, dll.) mengindeks situs Anda dengan sempurna.

Cara Menulis Server & Client Component

Secara default di framework modern seperti Next.js (App Router), semua komponen di dalam direktori proyek dianggap sebagai Server Component.

Jika Anda membutuhkan fitur interaktif seperti klik tombol, state, atau efek samping browser, Anda harus mendeklarasikannya sebagai Client Component dengan menuliskan direktif "use client" di baris paling atas berkas:

// Komponen Server (Default)
import { dapatkanKoleksiProyek } from '@/db/proyek';

export default async function HalamanProyek() {
  const listProyek = await dapatkanKoleksiProyek(); // Fetch langsung dari database
  
  return (
    <div>
      <h1 className="text-4xl font-bold">Daftar Proyek Saya</h1>
      <div className="grid grid-cols-3 gap-4">
        {listProyek.map(p => (
          <KartuProyek key={p.id} data={p} />
        ))}
      </div>
    </div>
  );
}

Dan ini adalah contoh Komponen Klien:

"use client"; // Menandai komponen ini sebagai Client Component

import { useState } from 'react';

export default function TombolLike() {
  const [likes, setLikes] = useState(0);
  
  return (
    <button 
      className="px-4 py-2 bg-black text-white font-bold"
      onClick={() => setLikes(likes + 1)}
    >
      Suka ( {likes} )
    </button>
  );
}

Kapan Harus Menggunakan yang Mana?

Gunakan Server Components secara default untuk:

• Halaman utama, artikel blog, portofolio, detail produk.
• Komponen statis atau dinamis yang membaca data langsung dari database atau API eksternal.

Gunakan Client Components ketika Anda membutuhkan:

• Interaksi pengguna seperti formulir input, menu dropdown, modal.
• Hooks bawaan seperti useState, useReducer, useEffect.
• Akses ke API spesifik browser seperti window, document, localStorage.

Kesimpulan

React Server Components bukan pengganti Client Components, melainkan rekan kolaborasi. Dengan membagi beban kerja secara cerdas antara server dan browser, kita dapat menciptakan aplikasi web yang luar biasa cepat dengan pengalaman pengguna yang sangat mulus!