React Server Components (RSC) hutengeneza tu kwenye seva — JavaScript yao haiwezi kutumwa kwenye kivinjari. Katika App Router, kila sehemu ni Server Component kwa chaguo-msingi; unachagua tabia ya mteja kwa njia ya wazi.
db ;
() {
users = db..();
(
);
}
Server Components inaweza kuwa async, await data moja kwa moja, na kufikia rasilimali za seva tu (hifadhi ya data, mfumo wa faili, siri) — kwa sababu zinafanya kazi kwenye seva. Hakuna kiwango cha API kinachohitajika kupata data, na siri haziwezi kufikia mteja.
Kivinjari kinakubali HTML/UI iliyotengenezwa, si nambari ya sehemu au tegemezi zake. Server Component inayotumia maktaba nzito ya markdown au date hairobei hata kiasi cha hiyo maktaba kwenye kivinjari — kupunguza saizi ya pakete kwa kasi.
// ❌ 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
Hakuna mwingiliano, hali, athari, au API za kivinjari — hizi zinahitaji 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} /></>;
}
Mwongozo: Server Components hufanya kazi na data/muundo; ingiza Client Components ambapo tu mwingiliano unahitajika ("visiwa").
Server Components ni sifa inayofafanua App Router.
Zinapunguza ukubwa wa pakete ya mteja (JS ndogo ya kupakua/kuchanganua), kuruhusu upatikanaji wa data wa moja kwa moja, salama upande wa seva bila API, na kuboresha utendaji na SEO.
Kujua kwamba wao ni chaguo-msingi — na kile kinachosababisha sehemu kuwa Client Component — ni msingi wa kukataa App Router programu kwa njia ya ufanisi.