Server vs Client Components
Când e nevoie de 'use client' și cum trec datele peste graniță.
Actualizat
Ce sunt Server Components și Client Components
În Next.js, fiecare componentă rulează fie pe server, fie în browser (și pe server, la prima randare). Alegerea decide ce poate face componenta și cât JavaScript ajunge la user.
- Server Component — rulează doar pe server. Codul ei nu ajunge niciodată în browser; userul primește doar HTML-ul rezultat.
- Client Component — e trimisă în browser ca JavaScript, se hidratează și poate fi interactivă.
În app/, orice componentă e Server Component implicit. Devine Client Component când fișierul începe cu 'use client'.
Diferențele
| Server Component | Client Component | |
|---|---|---|
| Rulează | doar pe server | server (HTML inițial) + browser |
| JS trimis în browser | zero | codul componentei + dependențe |
async / await direct |
da | nu |
| Acces la DB, fișiere, secrete | da | nu |
useState, useEffect, hooks |
nu | da |
onClick, onChange |
nu | da |
window, localStorage |
nu | da |
Când folosești fiecare
| Ai nevoie de... | Alegere |
|---|---|
| să citești date (DB, API) și să le afișezi | Server |
| conținut static: text, layout, liste | Server |
| secrete (chei API, DB URL) | Server |
| state, efecte, event handlers | Client |
| API-uri de browser (localStorage, geolocație) | Client |
| librării care folosesc hooks (grafice, editoare) | Client |
// Server Component — implicit
export default async function Page() {
const posts = await db.post.findMany()
return <PostList posts={posts} />
}'use client'
import { useState } from 'react'
export function LikeButton({ initial }: { initial: number }) {
const [likes, setLikes] = useState(initial)
return <button onClick={() => setLikes(likes + 1)}>♥ {likes}</button>
}Regula de aur
Ține 'use client' cât mai jos în arbore. Pagina rămâne server; doar butonul interactiv e client. 'use client' marchează o graniță: fișierul și tot ce importă el devin cod de client.
PageserverHeaderserverPostListserverLikeButtonclient — doar asta ajunge ca JS în browser
Footerserver
Granița server → client
| Regulă | Detalii |
|---|---|
| Datele trec prin props | trebuie să fie serializabile: string, number, obiecte simple, array-uri, Date, Promise |
| Fără funcții ca props | excepție: Server Actions |
Client poate primi Server Components ca children |
<ClientModal><ServerContent /></ClientModal> |
| Client nu poate importa un Server Component | îl primește doar ca children / prop |
Server Actions — mutații din client
Funcții 'use server' pe care le apelezi din client, dar care rulează pe server — pentru formulare și mutații. Lecția Server Actions.
Pe scurt
- Server Component (implicit): async, acces la date și secrete, zero JS în browser.
- Client Component (
'use client'): state, efecte, evenimente, API-uri de browser. 'use client'cât mai jos; props serializabile peste graniță.