Server Components का परिचय

Server Components एक chef जैसे हैं जो restaurant की kitchen में एक dish तैयार करता है और finished plate भेजता है, बजाय इसके कि आपको raw ingredients और एक recipe ship की जाए ताकि आप खुद table पर cook करें।

In this page:

Server Components क्या हैं
Server Components Hooks उपयोग क्यों नहीं कर सकते
Interactive Parts को Client Components के रूप में Mark करना

Syntax

markup

// Server Component (default): can be async, no hooks
async function ServerComponent() {
  const data = await fetchData();
  return <div>{data.value}</div>;
}

// Client Component: first line of the file
"use client";
function ClientComponent() {
  const [state, setState] = useState(initial);
  return <button onClick={() => setState(state + 1)}>{state}</button>;
}

Server Components क्या हैं

एक Server Component पूरी तरह server पर run होता है, इसका output (एक special serialized format के रूप में) render करते हुए और उसे directly browser को भेजते हुए, बजाय इसके कि JavaScript भेजे जो component को browser में run करे।

इसका मतलब है इसका code (और इसके कोई भी dependencies) client को कभी download करने की ज़रूरत ही नहीं।

Note: Server Components उस content के लिए एक अच्छा fit हैं जिसे interactivity की ज़रूरत नहीं, जैसे एक blog post का static text या एक product description।

Warning: इसे एक supporting framework (जैसे Next.js का App Router) चाहिए — यह कुछ ऐसा नहीं जो आप एक plain Create React App या Vite client-only project में enable करें।

उदाहरण: What Server Components Are

markup

// Run in your local React project (npm install required)
// app/page.js (Next.js App Router — a Server Component by default)
async function getPosts() {
  return [{ id: 1, title: 'Hello World' }];
}
export default async function Page() {
  const posts = await getPosts();
  return <ul>{posts.map(p => <li key={p.id}>{p.title}</li>)}</ul>;
}

Server Components Hooks उपयोग क्यों नहीं कर सकते

useState और useEffect जैसे Hooks उस behavior को manage करते हैं जो सिर्फ एक running browser में sense बनाता है — clicks पर react करना, state changes पर re-render होना।

चूंकि एक Server Component का code browser में बिल्कुल run ही नहीं होता, इन hooks के पास attach करने के लिए कुछ नहीं होता, इसलिए वहां इनकी simply अनुमति नहीं है।

Note: अगर UI के किसी piece को कोई interactivity चाहिए (clicks, form inputs, useState), उसे एक Client Component होना चाहिए, Server Component नहीं।

Warning: एक Server Component के अंदर useState उपयोग करना एक build-time या runtime error produce करता है — यह सिर्फ discouraged नहीं है, यह actually framework द्वारा disallowed है।

Interactive Parts को Client Components के रूप में Mark करना

एक file की बहुत पहली line के रूप में 'use client' जोड़ना उस component (और वह जो भी import करता है) को एक Client Component मार्क करता है, जो hooks और event handlers उपयोग कर सकता है, और normally browser में run करने के लिए JavaScript के रूप में shipped होता है जैसे React हमेशा से करता है।

Note: Client Components को जितना possible हो छोटा और focused रखें (सिर्फ interactive button, पूरा page नहीं) ताकि यह maximize हो कि कितना server-rendered रहता है।

Warning: किसी file पर 'use client' directive भूल जाना जो hooks या event handlers उपयोग करती है एक build error का कारण बनता है, क्योंकि framework default रूप से server-only मानता है।

उदाहरण: Marking Interactive Parts as Client Components

markup

// Run in your local React project (npm install required)
'use client';

export default function LikeButton() {
  const [liked, setLiked] = useState(false);
  return <button onClick={() => setLiked(!liked)}>{liked ? 'Liked' : 'Like'}</button>;
}

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Code Splitting with React.lazy Next Lesson → Introduction to Next.js (server-side React)

Server Components का परिचय

Server Components क्या हैं

Server Components Hooks उपयोग क्यों नहीं कर सकते

Interactive Parts को Client Components के रूप में Mark करना

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code