# React Server Components: Kapan dan Bagaimana Menggunakannya di Next.js

> Panduan praktis React Server Components di Next.js 15 — apa yang sebenarnya berubah, kapan menggunakannya, dan pola yang membuatnya powerful.

URL: https://www.matthewswong.com/id/blog/react-server-components-usage/

- Author: Matthews Wong (https://www.matthewswong.com/id/about/)
- Published: 2025-06-10
- Updated: 2025-06-10
- Category: Web Dev

React Server Components (RSC) adalah pergeseran paling signifikan dalam model pemrograman React sejak hooks. Di Next.js 15 dengan App Router, setiap komponen adalah Server Component secara default. Nol JavaScript untuk komponen render murni, tidak ada hidrasi, dan akses database langsung tanpa lapisan API. Tapi mereka bukan pengganti Client Components — mereka adalah pelengkap. Setelah membangun beberapa aplikasi App Router dari awal, inilah pemahaman praktis saya tentang cara menggunakannya secara efektif.

## Apa yang Server Components Sebenarnya Ubah

Perubahan fundamental: Server Components hanya berjalan di server dan mengirim HTML (bukan JavaScript) ke klien. Server Component yang mengambil dari Prisma tidak pernah mengirimkan klien Prisma, logika query database, atau kode terkait apa pun ke browser. Klien menerima HTML yang dirender. Ini menghilangkan seluruh kategori data fetching — tidak ada useEffect, tidak ada loading state untuk data awal, tidak ada fetch sisi klien.

### Batas 'use client'

Direktif 'use client' tidak membuat komponen tanpa server — ia menandai batas di mana pohon komponen menjadi dirender di klien. Semua yang di atas batas bisa menjadi Server Component. Kesalahan paling umum: menandai komponen induk 'use client' ketika hanya satu komponen daun yang membutuhkan interaktivitas. Anda bisa meneruskan output Server Component sebagai props (children) ke dalam Client Component.

> Dari membangun dashboard ERP dengan Next.js App Router: ambil data pada level Server Component tertinggi yang memungkinkan, lalu teruskan sebagai props ke Client Components interaktif di bawahnya. Server Component menjalankan query Prisma, meneruskan hasilnya sebagai prop ke komponen DataTable 'use client'. DataTable bisa melakukan pengurutan, penyaringan, dan paginasi sisi klien tanpa pernah menekan API lagi — semua data sudah ada dari render server awal.

## Pola Data Fetching Server Component

Async/await di Server Components adalah default yang bersih. Server Component bisa async — await query Prisma, await fetch() ke API eksternal, await Redis.get() — dan merender hasilnya langsung. Beberapa data fetch independen dalam sebuah komponen harus menggunakan Promise.all() untuk paralelisasi daripada menunggu secara berurutan. Data yang bergantung (fetch B hanya setelah A mengembalikan) bisa menggunakan await berurutan, tapi pertimbangkan apakah streaming Suspense akan lebih melayani pengguna.

### Streaming dengan Suspense

Batas Suspense memungkinkan Anda secara progresif melakukan streaming output Server Component. Bungkus Server Component yang lambat dimuat dalam '<'Suspense fallback='{<Skeleton />}'> dan Next.js melakukan streaming halaman: bagian yang cepat dirender segera, bagian yang lambat dirender saat siap, menggantikan skeleton. Ini meningkatkan performa yang dirasakan secara signifikan.

> **Jangan Fetch di dalam Client Components Ketika Anda Punya Server Component Induk**

> Pola anti yang umum: Server Component merender Client Component, yang kemudian menggunakan useEffect untuk mengambil data yang sama yang bisa disediakan Server Component. Ini menggandakan latensi — server merender, HTML tiba, JS terhidrasi, lalu klien menembakkan fetch lain. Selalu ambil di Server Component dan teruskan sebagai props. Client Component harus menangani interaktivitas saja — mutasi, event pengguna, pembaruan real-time via WebSocket.

## Caching di Server Components

fetch() Next.js di Server Components memiliki caching otomatis. Secara default, respons di-cache per request (deduplikasi dalam satu request). Anda mengontrol caching yang lebih lama dengan '{ next: { revalidate: N }' '}' (revalidasi berbasis waktu gaya ISR) atau '{ cache: ''no-store'' }' untuk data yang selalu segar. Query Prisma tidak melalui fetch(), jadi mereka tidak di-cache otomatis — gunakan wrapper unstable_cache() Next.js untuk menerapkan caching ke query Prisma.

## Yang Saya Gunakan dan Mengapa

Aturan saya: semua yang tidak membutuhkan useState, useEffect, event handler, atau API browser adalah Server Component. Daftar hal-hal yang membutuhkan Client Components lebih pendek dari yang Anda bayangkan: kontrol form dengan state terkontrol, modal dan drawer dengan state buka/tutup, chart (mereka mengakses DOM), interaksi drag-and-drop, dan langganan real-time. Dashboard ERP berat-RSC saya memuat jauh lebih cepat dari versi Pages Router sebelumnya.

## Server Components dan SEO

Server Components sangat baik untuk SEO karena konten ada dalam respons HTML awal — tidak ada JavaScript yang diperlukan untuk mesin pencari melihatnya. Halaman produk, posting blog, dan halaman marketing mendapat manfaat paling banyak. API metadata Next.js (generateMetadata, ekspor objek metadata) juga bekerja di level Server Component — gambar OG dinamis, URL kanonik, dan data terstruktur semuanya dirender di sisi server.

## Sumber & Bacaan Lanjut

- Next.js Docs — Server and Client Components — https://nextjs.org/docs/app/getting-started/server-and-client-components
- Medium — React Server Components in Practice — https://medium.com/@vyakymenko/react-server-components-in-practice-next-js-d1c3c8a4971f
- Flutebyte — React Server Components + Next.js: Real-World Patterns — https://flutebyte.com/react-server-components-next-js-real-world-patterns-that-actually-move-inp/

## Source links

- https://nextjs.org/docs/app/getting-started/server-and-client-components
- https://medium.com/@vyakymenko/react-server-components-in-practice-next-js-d1c3c8a4971f

## FAQ

### Apa perbedaan mendasar antara Server Components dan Client Components di Next.js?

Server Components hanya berjalan di server dan mengirim HTML yang sudah dirender ke klien — tidak ada JavaScript yang dikirimkan ke browser untuk komponen tersebut. Client Components, yang ditandai dengan 'use client', dirender di klien dan menangani interaktivitas seperti state, event handler, dan API browser. Keduanya saling melengkapi: Server Components menangani data fetching dan rendering, sementara Client Components menangani interaktivitas.

### Apa kesalahan paling umum yang dilakukan developer dengan batas 'use client'?

Kesalahan paling umum adalah menandai komponen induk sebagai 'use client' padahal hanya satu komponen daun yang benar-benar membutuhkan interaktivitas. Anda bisa meneruskan output Server Component sebagai props (children) ke dalam Client Component, sehingga Server Component tetap dirender di server dan output HTML-nya diteruskan sebagai children ke wrapper yang dirender di klien. Selalu dorong batas 'use client' sejauh mungkin ke bawah pohon komponen.

### Bagaimana cara menghindari pola anti double-latency dalam data fetching?

Selalu ambil data di Server Component dan teruskan sebagai props ke Client Components — jangan gunakan useEffect di dalam Client Component untuk mengambil ulang data yang bisa disediakan Server Component. Melakukan ini menggandakan latensi: server merender, HTML tiba, JavaScript terhidrasi, lalu klien menembakkan fetch lain. Client Components harus menangani interaktivitas saja — mutasi, event pengguna, dan pembaruan real-time via WebSocket.

### Bagaimana cara kerja caching untuk data fetching di Server Component, termasuk untuk query Prisma?

fetch() Next.js di Server Components memiliki caching otomatis dengan deduplikasi per request secara default. Anda bisa mengontrol caching yang lebih lama dengan { next: { revalidate: N } } untuk revalidasi berbasis waktu gaya ISR, atau { cache: 'no-store' } untuk data yang selalu segar. Query Prisma tidak melalui fetch() sehingga tidak di-cache secara otomatis — gunakan wrapper unstable_cache() Next.js untuk menerapkan caching pada query Prisma, panggilan Redis, atau fungsi async apa pun yang ingin Anda cache lintas request.

### Peningkatan performa nyata apa yang dialami penulis setelah beralih ke arsitektur berbasis RSC?

Dashboard ERP berbasis RSC milik penulis memuat jauh lebih cepat dibandingkan versi Pages Router sebelumnya — ukuran bundle JavaScript berkurang 40–50% dan tidak ada waterfall dari data fetching sisi klien. Peningkatan ini berasal dari Server Components yang mengirim HTML alih-alih JavaScript dan menghilangkan kebutuhan useEffect untuk data fetching pada saat load pertama.

---

- HTML version: https://www.matthewswong.com/id/blog/react-server-components-usage/
- English: https://www.matthewswong.com/en/blog/react-server-components-usage/
- Site index for agents: https://www.matthewswong.com/llms.txt
- Sitemap: https://www.matthewswong.com/sitemap.xml
- API description (OpenAPI): https://www.matthewswong.com/openapi.json