Memahami React Server Components

React Server Components (RSC) adalah paradigma baru dalam ekosistem React yang memungkinkan komponen di-render sepenuhnya di server. Ini merupakan perubahan fundamental dari bagaimana kita biasanya membangun aplikasi SPA (Single Page Application) yang client-heavy.

"Server Components memungkinkan pengembang untuk membangun aplikasi yang menjangkau bagian server dan klien, menggabungkan interaktivitas yang kaya dari aplikasi sisi klien dengan kinerja yang ditingkatkan dari rendering sisi server."

Mengapa Kita Membutuhkan RSC?

Sebelum RSC, kita sering kali harus memilih antara Server-Side Rendering (SSR) yang cepat untuk SEO tapi berat di awal, atau Client-Side Rendering (CSR) yang interaktif tapi lambat saat inisialisasi (First Load).

Dengan RSC, kita mendapatkan yang terbaik dari keduanya:

1. Bundle Size Lebih Kecil: Library raksasa seperti date-fns atau markdown-it yang berjalan di Server Component tidak akan dikirim ke browser pengguna!
2. Akses Data Langsung: Komponen server dapat langsung melakukan query ke database dengan aman tanpa melalui lapisan API eksternal.
3. Pemisahan Konteks yang Jelas: Hanya komponen yang butuh interaktivitas (onClick, useState) yang di-render di sisi klien.

Bagaimana Cara Kerjanya di Next.js?

Pada Next.js App Router, setiap komponen secara default adalah Server Component. Jika Anda butuh state atau event listener, Anda cukup menambahkan "use client" di baris teratas file tersebut.

// Ini adalah Server Component (default)
import db from '@/lib/db';

export default async function DaftarArtikel() {
  const artikel = await db.article.findMany();
  
  return (
    <div>
      {artikel.map(a => <h2 key={a.id}>{a.judul}</h2>)}
    </div>
  );
}

Kesimpulan

RSC bukanlah fitur yang akan menggantikan komponen klien, melainkan pelengkap yang sangat kuat. Memahami kapan harus menggunakan komponen server dan kapan harus menggunakan komponen klien adalah kunci menuju arsitektur web modern yang optimal.