Digital Transformation
Server Component (React Server Component)
TL;DR: Server Component adalah komponen React yang dieksekusi di server, kemudian hasil HTML-nya dikirim ke browser tanpa membawa kode JavaScript komponen tersebut. Hasilnya: bundle JS lebih kecil, akses langsung ke database, dan waktu interaktif lebih cepat. Default di Next.js App Router sejak versi 13.
Apa itu Server Component?
Server Component memisahkan kode yang berjalan di server dari kode yang berjalan di browser. Komponen yang tidak butuh interaktivitas (misalnya halaman artikel, daftar produk statis, header) dirender di server dan hasilnya dikirim sebagai HTML jadi. Klien menerima halaman yang sudah rapi tanpa harus mendownload, parse, dan eksekusi JavaScript komponen tersebut.
Dalam ekosistem Next.js 15 dengan App Router, semua komponen di folder app/ adalah Server Component secara default. Untuk membuat komponen interaktif (state, event handler, hook), tambahkan direktif 'use client' di baris pertama file. Pemisahan ini disebut React Server Component (RSC) dan menjadi fondasi arsitektur modern Next.js.
Server Component vs Client Component
| Aspek | Server Component | Client Component |
|---|---|---|
| Eksekusi | Server saja | Server (initial) + Browser |
| Akses DB | Bisa langsung | Tidak (lewat API) |
| useState, useEffect | Tidak boleh | Boleh |
| Event handler (onClick) | Tidak boleh | Boleh |
| Bundle JS dikirim ke browser | Tidak | Ya |
| Direktif | (default) | 'use client' |
| Use case | Data fetching, render statis | Form, dropdown, animasi |
Kapan Pakai yang Mana?
Pola yang umum dipakai dalam proyek Next.js client UMKM: bungkus seluruh halaman dengan Server Component, lalu pisahkan bagian interaktif kecil sebagai Client Component yang di-import. Misalnya halaman product detail adalah Server Component yang fetch dari database, sementara tombol "Tambah ke Keranjang" adalah Client Component yang punya state. Pendekatan ini menjaga bundle JavaScript tetap kecil dan LCP tetap cepat.
Kenapa Penting?
Untuk pasar Indonesia dengan device dan jaringan yang bervariasi, mengirim lebih sedikit JavaScript ke browser berarti halaman lebih cepat interaktif. Dalam audit performa client, migrasi dari pola Client Component dominan ke pola Server Component dominan sering memangkas First Input Delay 30 sampai 50 persen. Dokumentasi resmi tersedia di Next.js Server Components.
Pertanyaan Umum
Apakah Server Component bisa pakai useState?
Tidak. useState, useEffect, dan hook React lainnya hanya bisa dipakai di Client Component. Server Component bersifat statis tanpa state lokal.
Apakah Server Component cuma untuk Next.js?
Tidak. React Server Component adalah spesifikasi React. Next.js adalah framework pertama yang mengimplementasikannya secara penuh, diikuti Remix dan framework lain.
Istilah Terkait