React Server Components (RSC) केवल सर्भरमा रेन्डर हुन्छन् — तिनको JavaScript कहिले पनि ब्राउजरमा पठाइँदैन। App Router मा, हरेक component पूर्वनिर्धारितद्वारा एक Server Component हो; तपाईले स्पष्ट रूपमा client व्यवहारमा सहमति जनाउनुहुन्छ।
db ;
() {
users = db..();
(
);
}
Server Components async हुन सक्छन्, डेटा सीधै await गर्न सक्छन्, र सर्भर-केवल संसाधन (database, filesystem, secrets) पहुँच गर्न सक्छन् — किनकि तिनहरू सर्भरमा चल्छन्। डेटा फेच गर्नको लागि कुनै API तह आवश्यक छैन, र गोपनीयताएं कहिले पनि क्लाइन्टमा पुग्दैन।
ब्राउजरले रेन्डर गरिएको HTML/UI प्राप्त गर्छ, component को कोड वा यसका निर्भरताहरू होइन। एक Server Component जसले गहिरो markdown वा date library प्रयोग गर्छ कुनै पनि त्यो library ब्राउजरमा पठाउँदैन — 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
कुनै interactivity, state, effects, वा browser APIs छैन — ती एक 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} /></>;
}
प्याटर्न: Server Components डेटा/संरचना ह्यान्डल गर्छन्; Client Components केवल जहाँ interactivity आवश्यक छ त्यहाँ एम्बेड गर्नुहोस् ("islands")।
Server Components App Router को परिभाषित सुविधा हुन्।
तिनहरू क्लाइन्ट bundle size कम गर्छन् (कम JS डाउनलोड/पार्स गर्न), सीधा, सुरक्षित सर्भर-पक्ष डेटा पहुँच API बिना अनुमति दिन्छन्, र कार्यक्षमता र SEO सुधार गर्छन्।
जान्नु कि तिनहरू पूर्वनिर्धारित हुन् — र कुन कुराले एक component को Client Component हुन बाध्य गर्छ — App Router apps को कुशलतापूर्वक संरचना गर्नको लागि आधारभूत हो।