React Server Components (RSC) hanya render di server — JavaScript mereka tidak pernah dikirim ke browser. Di App Router, setiap component adalah Server Component secara default; Anda secara eksplisit memilih perilaku client.
db ;
() {
users = db..();
(
);
}
Server Components dapat async, await data secara langsung, dan mengakses resource hanya-server (database, filesystem, secrets) — karena mereka berjalan di server. Tidak perlu layer API untuk mengambil data, dan secrets tidak pernah sampai ke client.
Browser menerima HTML/UI yang sudah render, bukan kode component atau dependensinya. Server Component yang menggunakan library markdown atau date yang berat mengirim tidak ada library tersebut ke browser — secara dramatis mengurangi bundle size.
// ❌ 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 browser APIs — hal tersebut 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 ("islands").
Server Components adalah fitur yang mendefinisikan App Router.
Mereka mengurangi ukuran bundle client (lebih sedikit JS untuk diunduh/diparse), memungkinkan akses data server-side yang langsung dan aman tanpa API, serta meningkatkan performa dan SEO.
Memahami bahwa mereka adalah default — dan apa yang memaksa component menjadi Client Component — adalah fundamental untuk menyusun aplikasi App Router secara efisien.