App Router માં Server Components કેવી રીતે કામ કરે છે?

Question

Accepted Answer

**React Server Components (RSC)** ફક્ત **સર્વર પર રેન્ડર** થાય છે — તેમનું JavaScript ક્યારેય બ્રાઉઝર પર ોકાતું નથી. App Router માં, દરેક component ડિફોલ્ટ દ્વારા **Server Component** છે; તમે સ્પષ્ટ રીતે client behavior માં ભાગ લો. ## 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` ડેટા સીધું કરી શકે છે, અને સર્વર-માત્ર સંસાધનો (database, filesystem, secrets) ને access કરી શકે છે — કારણ કે તેઓ સર્વર પર ચલાય છે. ડેટા fetch કરવા માટે API layer ની જરૂર નથી, અને secrets ક્યારેય client પર પહોંચતું નથી. ## મોટો ફાયદો: તે component માટે શૂન્ય client JS બ્રાઉઝર **rendered HTML/UI** પ્રાપ્ત કરે છે, component ના code અથવા તેની dependencies નહીં. Server Component જે હેવી markdown અથવા date library ઉપયોગ કરે છે તે બ્રાઉઝર પર **કોઈપણ** library શિપ કરતું નથી — bundle size માં નાટકીય ઘટાડો. ## 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 ``` કોઈ interactivity, state, effects, અથવા browser APIs નથી — તે Client Component જરૂર છે. ## Server અને client ને compose કરવું ```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 ડેટા/structure handle કરે છે; Client Components માત્ર જ્યાં interactivity જરૂર હોય તેટલું embed કરો ("islands"). ## તે શા માટે મહત્વપૂર્ણ છે Server Components App Router ની વ્યાખ્યાયિત વિશેષતા છે. તેઓ client bundle size ને કાપે છે (ઓછું JS download/parse કરવું), સીધી, સુરક્ષિત server-side ડેટા access API ના વિના કરવા દે છે, અને performance અને SEO માં સુધારો કરે છે. તે જાણવું કે તેઓ ડિફોલ્ટ છે — અને શું component ને Client Component બનાવતું છે — તે App Router apps ને કાર્યક્ષમતાથી સ્ટ્રક્ચર કરવા માટે મૌલિક છે.