React Server Components (RSC) merender hanya di server — JavaScript mereka tidak pernah dikirim ke browser. Di App Router, setiap komponen adalah Server Component secara default; Anda memilih perilaku klien secara eksplisit.
db ;
() {
users = db..();
(
);
}
Server Components boleh async, await data secara langsung, dan mengakses sumber daya khusus server (basis data, sistem file, rahasia) — karena berjalan di server. Tidak ada lapisan API yang diperlukan untuk mengambil data, dan rahasia tidak pernah mencapai klien.
Browser menerima HTML/UI yang dirender, bukan kode komponen atau dependensinya. Server Component yang menggunakan perpustakaan markdown atau date yang berat tidak mengirim apa pun dari perpustakaan tersebut ke browser — secara drastis mengurangi ukuran bundel.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Tidak ada interaktivitas, state, effects, atau API browser — yang memerlukan Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
Pola: Server Components menangani data/struktur; sematkan Client Components hanya di mana interaktivitas diperlukan ("pulau").
Server Components adalah fitur penentu App Router.
Mereka mengurangi ukuran bundel klien (lebih sedikit JS untuk diunduh/diurai), memungkinkan akses data server-side yang aman dan langsung tanpa API, serta meningkatkan kinerja dan SEO.
Mengetahui bahwa mereka adalah default — dan apa yang memaksa komponen menjadi Client Component — adalah fundamental untuk menstrukturkan aplikasi App Router secara efisien.