Memahami React Server Components di Next.js 16

React Server Components (RSC) adalah paradigma baru dalam pengembangan web modern. Berbeda dengan komponen React tradisional yang dirender di sisi klien, RSC dieksekusi sepenuhnya di server.

Apa itu React Server Components?

RSC memungkinkan kita menulis komponen yang berjalan di server, mengakses database secara langsung, dan mengirim hasilnya ke client sebagai HTML statis — tanpa mengirim JavaScript tambahan ke browser.

// Server Component (default di App Router)
async function BlogPost({ slug }: { slug: string }) {
  const post = await db.posts.findOne({ slug }); // langsung akses DB!
  return <article>{post.content}</article>;
}

Keunggulan RSC

• Performa lebih baik — Tidak ada JavaScript yang dikirim untuk komponen server
• Akses langsung ke server resources — Database, filesystem, dll.
• Streaming otomatis — Next.js dapat stream konten secara bertahap
• SEO-friendly — Konten tersedia langsung di HTML

Kapan Menggunakan Client Components?

Gunakan 'use client' ketika komponen Anda membutuhkan:

• State dengan useState / useReducer
• Side effects dengan useEffect
• Event handlers (onClick, onChange, dll)
• Browser APIs (localStorage, window, dll)

Kesimpulan

React Server Components bukan pengganti Client Components — mereka saling melengkapi. Gunakan RSC untuk data fetching dan rendering statis, dan Client Components untuk interaktivitas.