React Server Components (RSC) yalnızca sunucuda render edilir — JavaScript'leri asla tarayıcıya gönderilmez. App Router'da, her bileşen varsayılan olarak bir Server Component'tir; istemci davranışına açıkça katılırsınız.
db ;
() {
users = db..();
(
);
}
Server Components async olabilir, veri doğrudan await edebilir ve yalnızca sunucu kaynakları (veritabanı, dosya sistemi, gizli dizeler) erişebilir — çünkü sunucuda çalışırlar. Veri almak için API katmanına gerek yoktur ve gizli dizeler asla istemciye ulaşmaz.
Tarayıcı render edilmiş HTML/UI alır, bileşen kodu veya bağımlılıkları değil. Ağır markdown veya date kütüphanesi kullanan bir Server Component, bu kütüphanenin hiçbirini tarayıcıya göndermez — paket boyutunu çarpıcı şekilde azaltır.
// ❌ 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
Etkileşim, durum, efekt veya tarayıcı API'leri yok — bunlar bir Client Component gerektirir.
// 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} /></>;
}
Desen: Server Components verini/yapıyı işler; Client Components'leri yalnızca etkileşimin gerekli olduğu yerde gömme ("adalar").
Server Components, App Router'ın tanımlayıcı özelliğidir.
İstemci paket boyutunu azaltırlar (indirip ayrıştırmak için daha az JS), API olmadan doğrudan, güvenli sunucu tarafı veri erişimine izin verirler ve performans ile SEO'yu iyileştirirler.
Varsayılan olduklarını — ve bir bileşeni Client Component yapmaya ne zorlayacağını — bilmek, App Router uygulamalarını verimli bir şekilde yapılandırmanın temelini oluşturur.