Apakah React Server Components dan bagaimana perbedaannya dengan komponen klien?

Question

Accepted Answer

**Server Components (RSC)** merender di **server** dan menghantar hasil serialisasi ke browser. Mereka menghantar **sifar JavaScript** untuk diri mereka sendiri — hanya data/markup, bukan kod mereka. ## Dua jenis ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Kemampuan dan kekangan | | Server Component | Client Component | |---|---|---| | Boleh `await` / ambil data secara langsung | ✅ | ❌ | | Akses sumber/rahsia server | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Hantar JS ke browser | ❌ (sifar) | ✅ | ## Mengapa ia penting - **Kurang JavaScript klien** → muatan lebih pantas dan interaktiviti. - **Pengambilan data di sebelah sumber** (tiada pusingan API dari browser, tidak mendedahkan bukti kelayakan DB). - Anda **komposit** mereka: komponen server merender komponen klien untuk "pulau" interaktif. Komponen server boleh merender satu klien, tetapi **bukan** sebaliknya. ## Tangkapan Prop yang dilewatkan merentasi sempadan server→klien mesti **bersiri** — anda tidak boleh melalui fungsi atau contoh kelas. RSC mengubah model mental daripada "semuanya berjalan di browser" kepada "render di server secara lalai, pilih klien hanya di tempat anda memerlukan interaktiviti."

	Server Component	Client Component
Boleh `await` / ambil data secara langsung	✅	❌
Akses sumber/rahsia server	✅	❌
`useState`/`useEffect`/events	❌	✅
Hantar JS ke browser	❌ (sifar)	✅