Join the discussion
Comments
Loading comments...
Cookie preferences
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Join the discussion
Loading comments...
We use essential cookies for sign-in and preferences. With your permission, we also use basic analytics to improve lessons.
Server/client boundary, RSC payload streaming और zero-bundle server rendering।
React Server Components (RSC) वे components हैं जो exclusively server पर चलते हैं — ये कभी browser को नहीं भेजे जाते। ये सीधे databases, file systems और server-only secrets को zero client bundle cost पर access कर सकते हैं। RSC output HTML नहीं बल्कि एक special wire format (RSC Payload) है जिसे client पर React, server code को re-run किए बिना component tree को reconstruct करने के लिए उपयोग करता है।
जब एक page load होता है, server आपके Server Components run करता है, async database queries, file reads या API calls directly execute करता है। Output HTML नहीं है — यह एक custom streaming format में एक serialized React element tree (RSC Payload) है।
जब server एक Client Component ('use client' से marked) encounter करता है, वह इसे render नहीं करता। इसके बजाय, यह payload में component के module URL और props के साथ एक CLIENT_REFERENCE placeholder insert करता है। Client इन holes को browser में Client Component run करके भरता है।
Server RSC payload को stream करता है जैसे-जैसे वह प्रत्येक async operation complete करता है। Client का React runtime chunks receive करता है और progressively component tree build करता है — पहले Server Component output, फिर Client Component shells, फिर hydration।
Client पर React, streamed RSC payload लेता है और इसका उपयोग पूरे component tree को reconstruct करने के लिए करता है। केवल Client Components hydrate होते हैं (event listeners attach होते हैं)। Server Component output already final है — client पर कोई re-execution नहीं।
'use server' से marked functions Server Actions बन जाते हैं — RPC-style functions जिन्हें client regular async functions की तरह call कर सकता है। Under the hood, React server को encoded arguments के साथ एक POST request भेजता है और नया RSC payload stream करता है।
File-level directive जो एक module और उसके सभी imports को Client Components के रूप में mark करता है। एक client boundary बनाता है — सभी exports hooks, event handlers और browser APIs उपयोग कर सकते हैं।
एक function को Server Action के रूप में mark करता है। Client Components से network request के ज़रिए call किया जा सकता है। Function, server पर full server-side access के साथ run होता है।
Server-rendered component tree describe करने वाला एक compact streaming JSON-like format। CLIENT_REFERENCE holes include करता है जहाँ client components जाने चाहिए। HTML नहीं।
Server Components कभी client JS bundle में नहीं आते। एक Server Component जो 500KB markdown parser import करे, client को 0 bytes जोड़ता है।
'use client' या 'use server' के बिना Components दोनों contexts में उपयोग किए जा सकते हैं। Server Component द्वारा import किए जाने पर server पर, और Client Component द्वारा import किए जाने पर client पर run होते हैं।
1// ServerComponent.tsx — runs ONLY on server2// No bundle cost, can use async/await, access DB directly3async function ProductPage({ id }) {4 const product = await db.products.findById(id); // direct DB access!56 return (7 <div>8 <h1>{product.name}</h1>9 {/* Pass server data to a client component */}10 <AddToCartButton productId={product.id} price={product.price} />11 </div>12 );13}1415// AddToCartButton.tsx — runs on client (needs onClick)16'use client';17function AddToCartButton({ productId, price }) {18 const [added, setAdded] = useState(false);1920 return (21 <button onClick={() => {22 addToCart(productId);23 setAdded(true);24 }}>25 {added ? 'Added!' : `Add for $${price}`}26 </button>27 );28}
Server Components performance equation को मूलभूत रूप से बदलते हैं। पहले, कोई भी component जो data fetch करता था, उसे fetching library, data transformation logic और rendering code client को ship करना होता था। RSC के साथ, यह सब server पर रहता है। Client केवल final rendered output और interactive islands (Client Components) receive करता है। इससे bundles dramatically छोटे होते हैं और Time-to-Interactive तेज़ होता है।
A product detail page needs to show: product info (from DB), reviews (from API), and an interactive 'Add to Cart' button. Traditional approach: fetch all data client-side with useEffect → loading spinners → hydration overhead.
Client-side fetching means: ship the fetch logic in the bundle → render loading state → make API calls from the browser → parse responses → re-render with data. The user sees a spinner, the bundle includes API client code, and there's a waterfall: page loads → JS executes → fetch starts → data arrives.
Make ProductPage and Reviews as Server Components (the default in Next.js App Router). They fetch data on the server with direct DB/API access and send pre-rendered HTML. Only AddToCartButton is a Client Component (marked with 'use client') because it needs onClick. Zero API client code in the bundle.
Takeaway: Server Components eliminate the request waterfall by moving data fetching to the server. Only interactive components (buttons, forms, animations) need to be Client Components. This pattern typically reduces bundle size by 30-50% and eliminates loading spinners for initial data.
You're building a blog post page. It has a header (static), article body (static with syntax-highlighted code), a comment section (interactive — like/reply buttons), and a share widget (interactive — copy link, social share).
New developers often mark the entire page as 'use client' because ONE component needs interactivity. This sends the entire page's JavaScript to the browser — syntax highlighting library, markdown parser, etc. — even though 80% of the page is static content.
Keep the page as a Server Component (default). Only wrap Comment and ShareWidget with 'use client'. The header, article body, and syntax highlighting render on the server and send zero JavaScript. The client only receives the small interactive components. Think of the boundary as: 'What needs browser APIs (state, effects, event handlers)?'
Takeaway: Push the 'use client' boundary as far DOWN the tree as possible. The rule: a component should be a Client Component only if it directly uses useState, useEffect, onClick, or browser-only APIs. Everything else should stay as a Server Component for zero bundle cost.