React Server Components (RSC) suna aiki kawai a kan server — JavaScript-din su ba a aika shi ga browser ba. A cikin App Router, kowane component shine Server Component ta tsohuwa; kuna zaɓar client aiki a sarari.
db ;
() {
users = db..();
(
);
}
Server Components zasu iya zama async, await data kai tsaye, da daɗa server-only albarkatu (database, filesystem, secrets) — saboda suna aiki a kan server. Babu API layer da ake buƙata don komi data, kuma secrets ba su isa client ba.
Browser yana karɓa rendered HTML/UI, ba component's code ba ko dependencies-sa. Server Component wanda yake amfani mahimmin markdown ko date library ba shi don aika waccan library zuwa browser — ya rage bundle size sosai.
// ❌ 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
Babu matakaici, state, effects, ko browser APIs — waɗannan suna bukataɗa 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} /></>;
}
Alur: Server Components suna tunawa da data/structure; saka Client Components kawai inda ake buƙa matakaici ("islands").
Server Components shine sigar bugu na App Router.
Suna rage client bundle size (ƙarin JS don sauke/fassara), baa daɗa direct, server-side data access mara wuyiya ba tare da API ba, da haɗa performance da SEO.
Sanin cewa suna default — da abin da ya tilasta component ya zama Client Component — shine tushe na tsari na App Router apps cikin inganci.