App Router मध्ये Server Components कसे कार्य करतात?

Question

Accepted Answer

**React Server Components (RSC)** **केवळ सर्व्हरवर** रेंडर करतात — त्यांचे JavaScript कधीही ब्राउজरला पाठवले जात नाही. App Router मध्ये, प्रत्येक घटक **डिफॉल्टनुसार** Server Component आहे; आप स्पष्टपणे क्लायंट वर्तनात निवडणी करतात. ## Server Component काय करू शकते ```tsx // app/users/page.tsx — a Server Component (no "use client") import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ direct DB access, runs on server return (

{u.name}

); } ``` Server Components **async** असू शकतात, डेटा थेट `await` करू शकतात, आणि केवळ सर्व्हर संसाधनांमध्ये प्रवेश करू शकतात (डेटाबेस, फाइलसिस्टम, गुप्त) — कारण ते सर्व्हरवर चलतात. डेटा आणण्यासाठी API स्तर आवश्यक नाही, आणि गुप्त कधीही क्लायंटकडे पोहोचत नाहीत. ## मोठा फायदा: या घटकासाठी शून्य क्लायंट JS ब्राउজर **प्रस्तुत HTML/UI** प्राप्त करतो, घटकाचा कोड किंवा त्याचे अवलंबन नाही. Server Component जो वजनदार markdown किंवा date लायब्रेरी वापरतो **कोणताही** त्या लायब्रेरीचा भाग ब्राउজरला पाठवत नाही — बंडल आकार नाटकीयरीत्या कमी करते. ## Server Components काय करू शकत नाहीत ```tsx // ❌ 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 ``` कोणतीही परस्परक्रिया, स्थिती, प्रभाव किंवा ब्राउজर API — ते Client Component आवश्यक आहेत. ## सर्व्हर आणि क्लायंट रचना ```tsx // 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 <>

; } ``` प्रकार: Server Components डेटा/संरचना हाताळते; केवळ जेथे परस्परक्रिया आवश्यक आहे ("islands") तेथे Client Components एम्बेड करा. ## हे महत्वाचे का आहे Server Components हे App Router चे परिभाषित वैशिष्ट्य आहे. ते क्लायंट बंडल आकार कमी करतात (कमी JS डाउनलोड/पार्स करण्यासाठी), API शिवाय थेट, सुरक्षित सर्व्हर-साइड डेटा अ‍ॅक्सेस अनुमती देतात, आणि कार्यक्षमता आणि SEO सुधारतात. हे जाणून घेणे की ते डिफॉल्ट आहेत — आणि कोणते घटकाला Client Component बनवते — हे App Router अ‍ॅप्स कार्यक्षमतेने संरचित करण्यासाठी मूलभूत आहे.