Kako Server Components rade u App Routeru?

Question

Accepted Answer

**React Server Components (RSC)** se renderiraju **samo na serveru** — njihov JavaScript se nikada ne šalje u preglednik. U App Routeru, svaka komponenta je Server Component **prema zadanoj postavki**; eksplicitno se uključuje ponašanje klijenta. ## Što Server Component može napraviti ```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 mogu biti **async**, `await` podatke direktno i pristupiti samo-serverskim resursima (baza podataka, datotečni sustav, tajne) — jer se izvršavaju na serveru. Nije potreban API sloj za dohvaćanje podataka, i tajne nikada ne stižu do klijenta. ## Najveća prednost: nula klijentskog JS-a za tu komponentu Preglednik prima **renderiranu HTML/UI**, ne kod komponente ili njene zavisnosti. Server Component koji koristi teške markdown ili date knjižnicu ne šalje **nikakvu** od te knjižnice u preglednik — dramatično smanjuje veličinu paketa. ## Što Server Components NISU u stanju napraviti ```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 ``` Nema interaktivnosti, stanja, efekata ili API-ja preglednika — to zahtijeva Client Component. ## Sastavljanje servera i klijenta ```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 <>

; } ``` Uzorak: Server Components rukuju podacima/strukturom; ugniježđuju Client Components samo gdje je interaktivnost potrebna ("otoci"). ## Zašto je važno Server Components su definirajuća značajka App Routera. Smanjuju veličinu klijentskog paketa (manje JS-a za preuzimanje/parsiranje), omogućavaju izravan, siguran pristup podacima na strani servera bez API-ja i poboljšavaju performanse i SEO. Znati da su zadana postavka — i što tjera komponentu da bude Client Component — temelj je za učinkovito strukturiranje App Router aplikacija.