X'inhuma React Server Components u kif iddifferenzjaw minn client components?

Question

Accepted Answer

**Server Components (RSC)** jagħmlu render fuq il-**server** u jagħtu riżultat serializzat il-browser. Jissaldu **żero JavaScript** għalihom stess — biss data/markup, mhux il-code tagħhom. ## Iż-żewġ tipi ```jsx // Server Component (default in the Next.js App Router): async function ProductPage({ id }) { const product = await db.products.find(id); // fetch DIRECTLY on the server return ; // no client JS for this component } // Client Component — opt in for interactivity: "use client"; function AddToCart() { const [qty, setQty] = useState(1); // hooks/events need the client return ; } ``` ## Il-kapaċitajiet u l-limitazzjonijiet | | Server Component | Client Component | |---|---|---| | Jistgħu `await` / jaqbu data direttament | ✅ | ❌ | | Il-aċċess tar-risorsi/sigriet tas-server | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Jagħtu JS lil-browser | ❌ (żero) | ✅ | ## Għaliex hija importanti - **Inqas JavaScript tal-client** → tagħbija aktar malajr u interattività. - **Il-ġbir tad-data ħdejn is-sors** (l-ebda round-trip API mill-browser, l-ebda espożizzjoni tal-kredenzjali tal-DB). - Inti **tikkomponu** tagħhom: il-komponenti tas-server jagħmlu render il-komponenti tal-client għall-"gżejjer" interattivi. Komponent tas-server jista' jagħmel render lil wieħed tal-client, imma **le** vice-versa. ## Il-ħargħa Props migħuri fuq il-ħadd server→client għandhom ikunu **serializable** — ma tistax tgħaddi funzjonijiet jew istanzi tal-klassi. RSC tbiddel il-mudell mentali minn "kollox jaħdem fil-browser" għal "render fuq is-server b'mod default, agħżel il-client biss fejn trid interattività."

	Server Component	Client Component
Jistgħu `await` / jaqbu data direttament	✅	❌
Il-aċċess tar-risorsi/sigriet tas-server	✅	❌
`useState`/`useEffect`/events	❌	✅
Jagħtu JS lil-browser	❌ (żero)	✅