Što su React Server Components i kako se razlikuju od klijentskih komponenti?

Question

Accepted Answer

**Server Components (RSC)** se renderiraju na **serveru** i šalju serijalizirani rezultat u preglednik. Ne prate **nikakav JavaScript** za sebe — samo podatke/markup, ne njihov kod. ## Dvije vrste ```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 ; } ``` ## Mogućnosti i ograničenja | | Server Component | Client Component | |---|---|---| | Može `await` / dohvatiti podatke izravno | ✅ | ❌ | | Pristup serverskim resursima/tajnama | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Šalje JS u preglednik | ❌ (nula) | ✅ | ## Zašto je to važno - **Manji klijentski JavaScript** → brže učitavanje i interaktivnost. - **Dohvaćanje podataka pored izvora** (nema API round-trip iz preglednika, nema izlaganja DB kredencijala). - Možete ih **komponirati**: serverske komponente renderiraju klijentske komponente za interaktivne "otoke." Serverska komponenta može renderirati klijentsku, ali **ne** obrnuto. ## Zamka Rekurzije proslijeđene preko granice server→klijent moraju biti **serijalizabilne** — ne možete proslijediti funkcije ili instance klasa. RSC mijenja mentalni model od "sve se pokreće u pregledniku" u "po zadanom renderira na serveru, uključi se u klijent samo gdje ti treba interaktivnost."

	Server Component	Client Component
Može `await` / dohvatiti podatke izravno	✅	❌
Pristup serverskim resursima/tajnama	✅	❌
`useState`/`useEffect`/events	❌	✅
Šalje JS u preglednik	❌ (nula)	✅