App Router ਵਿੱਚ Server Components ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

**React Server Components (RSC)** **ਸਿਰਫ਼ ਸਰਵਰ 'ਤੇ** ਰੈਂਡਰ ਹੁੰਦੇ ਹਨ — ਉਨ੍ਹਾਂ ਦਾ JavaScript ਕਦੇ ਬ੍ਰਾ ਨ੍ਜ਼ਰ ਵਿੱਚ ਭੇਜਿਆ ਨਹੀਂ ਜਾਂਦਾ। App Router ਵਿੱਚ, ਹਰੇਕ component **ਡਿਫ਼ਾਲਟ ਤੌਰ 'ਤੇ** ਇੱਕ 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` ਕਰ ਸਕਦੇ ਹਨ, ਅਤੇ ਸਰਵਰ-ਸਿਰਫ਼ resources (database, filesystem, secrets) ਤੱਕ ਪਹੁੰਚ ਸਕਦੇ ਹਨ — ਕਿਉਂਕਿ ਉਹ ਸਰਵਰ 'ਤੇ ਚਲਦੇ ਹਨ। ਡਾਟਾ ਲਿਆਉਣ ਲਈ ਕੋਈ API ਪਰਤ ਲੋੜੀਂਦੀ ਨਹੀਂ ਹੈ, ਅਤੇ ਭੇਦ ਕਦੇ ਕਲਾਈਂਟ ਤੱਕ ਨਹੀਂ ਪਹੁੰਚਦੇ। ## ਬੱਡਾ ਫ਼ਾਇਦਾ: ਇਸ component ਲਈ ਜ਼ੀਰੋ ਕਲਾਈਂਟ JS ਬ੍ਰਾ ਨ੍ਜ਼ਰ **ਰੈਂਡਰ ਕੀਤੇ HTML/UI** ਪ੍ਰਾਪਤ ਕਰਦਾ ਹੈ, ਨਾ ਤਾ component ਦਾ ਕੋਡ ਜਾਂ ਇਸ ਦੀ ਨਿਰਭਰਤਾ। ਇੱਕ Server Component ਜੋ ਭਾਰੀ markdown ਜਾਂ date library ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਉਸ library ਦਾ **ਕੋਈ ਵੀ** ਭਾਗ ਬ੍ਰਾ ਨ੍ਜ਼ਰ ਵਿੱਚ ਨਹੀਂ ਭੇਜਦਾ — bundle size ਵਿੱਚ ਨਾਟਕੀ ਕਮੀ। ## Server Components ਕੀ CANNOT ਕਰ ਸਕਦੇ ਹਨ ```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 ਦੀ ਲੋੜ ਕਰਦੇ ਹਨ। ## ਸਰਵਰ ਅਤੇ ਕਲਾਈਂਟ ਦਾ ਸੰਜੋਗ ਕਰਨਾ ```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 ਨੂੰ ਸਿਰਫ਼ ਜਿੱਥੇ interactivity ਲੋੜੀਂਦੀ ਹੈ ਉਥੇ ਸ਼ਾਮਿਲ ਕਰੋ ("islands")। ## ਇਹ ਕਿਉਂ ਮਾਇਨੇ ਰੱਖਦਾ ਹੈ Server Components App Router ਦੀ ਪਰਿਭਾਸ਼ਿਤ ਵਿਸ਼ੇਸ਼ਤਾ ਹਨ। ਉਹ ਕਲਾਈਂਟ bundle size ਵਿੱਚ ਕਮੀ ਕਰਦੇ ਹਨ (ਘੱਟ JS ਡਾ ਨ੍ਲੋਡ/ਪਾਰਸ ਕਰਨਾ), ਸਿੱਧਾ, ਸੁਰੱਖਿਅਤ server-side data access API ਤੋਂ ਬਿਨਾ, ਅਤੇ performance ਅਤੇ SEO ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਨ। ਜਾਣਨਾ ਕਿ ਉਹ ਡਿਫ਼ਾਲਟ ਹਨ — ਅਤੇ ਕਿਹੜੀ ਚੀਜ਼ ਇੱਕ component ਨੂੰ Client Component ਬਣਨ ਲਈ ਮਜਬੂਰ ਕਰਦੀ ਹੈ — App Router apps ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਢਾਂਚਾਗਤ ਕਰਨ ਲਈ ਬੁਨਿਆਦੀ ਹੈ।