← all posts

Cara Kerja React Server Component di Next.js

6/27/2026

Cara Kerja React Server Component di Next.js

React Server Components

React Server Components (RSC) adalah fitur yang memisahkan komponen yang di-render di server vs client.

Kenapa Penting?

Sebelum RSC, semua komponen di-render di client (browser). Ini bikin JavaScript bundle besar dan website lambat.

Dengan RSC:

  • Komponen server — nol JavaScript, langsung HTML
  • Komponen client — tetap interaktif, tapi lebih sedikit

Cara Kerja

Server Component (default)

Client Component

Aturan Penting

  1. Server component bisa import client component, tapi tidak sebaliknya
  2. Client component tetap bisa passing children server component
  3. Hooks (useState, useEffect) hanya di client component

Dampak ke Performance

  • Bundle size — turun drastis
  • First Paint — lebih cepat karena HTML langsung dikirim
  • SEO — lebih baik karena konten sudah ada di HTML

RSC adalah masa depan React.