Memahami React Server Components: Kapan Pakai, Kapan Hindari

Apa Itu React Server Components?

React Server Components (RSC) adalah komponen yang dirender sepenuhnya di server dan hasilnya dikirim ke client sebagai payload — bukan HTML, bukan JavaScript, tapi representasi virtual DOM yang dapat di-hydrate secara selektif.

Perbedaan Utama dengan Komponen Biasa

Kapan Gunakan Server Components

• Komponen yang hanya menampilkan data dari database atau API — tidak ada interaksi user.
• Halaman yang butuh SEO optimal — konten langsung ada di HTML tanpa menunggu JS.
• Komponen berat yang menggunakan library besar (markdown renderer, syntax highlighter) — library tidak perlu masuk ke bundle client.

Kapan Hindari Server Components

• Komponen yang perlu merespons interaksi user secara real-time (form, modal, accordion).
• Komponen yang bergantung pada browser API (localStorage, window, geolocation).
• Komponen yang menggunakan custom hooks dengan state.

Pola Terbaik: Komposisi Hybrid

// Server Component — ambil data dari DB
async function ProductPage({ id }) {
  const product = await db.product.findUnique({ where: { id } });
  return (
    

        {/* Server */}
          {/* Client */}
    
  );
}

Dengan pola ini, data fetching ada di server, interaktivitas ada di client — yang terbaik dari dua dunia.