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** పొందుతుంది, కంపోనెంట్ కోడ్ లేదా దాని డిపెండెన్సీలు కాదు. భారీ markdown లేదా date లైబ్రరీని ఉపయోగించే Server Component ఆ లైబ్రరీ **ఏమీ** బ్రౌజర్‌కు పంపదు — పాకేజీ సైజ్‌ను నాటకీయంగా తగ్గిస్తుంది. ## 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 డేటా/నిర్మాణాన్ని సంభాళ్లుకుంటాయి; ఇంటరঅాక్టివిటీ అవసరమైన చోట మాత్రమే Client Components ఎంబెడ్ చేయండి ("islands"). ## ఇది ఎందుకు ముఖ్యమైనది Server Components App Router యొక్క నిర్వచించే లక్షణం. వారు క్లయింట్ పాకేజీ సైజ్‌ను తగ్గిస్తారు (డౌన్‌లోడ్/పార్సు చేయడానికి JS తక్కువ), నేరుగా, సురక్షితమైన సర్వర్-సైడ్ డేటా యాక్సెస్‌ను API లేకుండా అనుమతిస్తారు, మరియు పనితీరు మరియు SEO ను మెరుగుపరుస్తారు. వారు డిఫాల్ట్ — మరియు కంపోనెంట్‌ను Client Component చేయడానికి ఎటు ఆ ఉద్దేశ్యం — App Router అప్లికేషన్‌లను సమర్థవంతంగా నిర్మించటానికి ఆధారమైనది.