Hva er React Server Components og hvordan skiller de seg fra client components?

Question

Accepted Answer

**Server Components (RSC)** rendrer på **serveren** og sender et serialisert resultat til nettleseren. De leverer **null JavaScript** for seg selv — bare dataene/markeringen, ikke koden deres. ## De to typene ```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 ; } ``` ## Muligheter og begrensninger | | Server Component | Client Component | |---|---|---| | Kan `await` / hente data direkte | ✅ | ❌ | | Få tilgang til serverressurser/hemmeligheter | ✅ | ❌ | | `useState`/`useEffect`/events | ❌ | ✅ | | Leverer JS til nettleseren | ❌ (null) | ✅ | ## Hvorfor det er viktig - **Mindre client JavaScript** → raskere innlastinger og interaktivitet. - **Datahenting ved siden av kilden** (ingen API-rundtur fra nettleseren, ikke eksponering av DB-legitimasjon). - Du **komponerer** dem: server components rendrer client components for de interaktive "øyene." En server component kan rendrer en client en, men **ikke** omvendt. ## Gotcha Props som sendes over server→client-grensen må være **serialiserbare** — du kan ikke sende funksjoner eller klasseinstanser. RSC endrer mentalmodellen fra "alt kjører i nettleseren" til "rendrer på serveren som standard, velg seg inn i klienten bare der du trenger interaktivitet."

	Server Component	Client Component
Kan `await` / hente data direkte	✅	❌
Få tilgang til serverressurser/hemmeligheter	✅	❌
`useState`/`useEffect`/events	❌	✅
Leverer JS til nettleseren	❌ (null)	✅