Server Components renderują się na serwerze, mogą bezpośrednio używać backendu i nie wspierają hooków/eventów. Client Components działają w przeglądarce, mogą używać `useState/useEffect` i handlerów, ale dokładają JS do bundla.
Odpowiedź zaawansowana
Głębiej
W App Router komponenty są **domyślnie Server Components**. Server Component renderuje się na serwerze i wysyła do klienta lekką reprezentację (bez JS komponentu). Dzięki temu:
możesz czytać dane bezpośrednio (DB/ORM/usługi wewnętrzne) bez ujawniania sekretów,
zmniejszasz bundel po stronie klienta,
poprawiasz wydajność stron w większości statycznych.
Client Components działają w przeglądarce. Służą do interaktywności (stan, efekty, event handlery), ale zwiększają ilość JS wysyłanego użytkownikowi.
Zasady praktyczne
Trzymaj drzewo UI „server-first”; Client Components dodawaj na liściach, tylko gdy potrzebujesz interakcji.
Przekazuj z serwera do klienta **serializowalne propsy** (bez funkcji, połączeń DB, instancji klas).
Jeśli możesz, fetchuj dane w Server Components; client-side fetch zostaw dla danych stricte klienckich.
Przykład
// Server Component (domyślny)
export default async function Page() {
const user = await getUser();
return <UserProfile user={user} />;
}
// Client Component
'use client'
function UserProfile({ user }: { user: { name: string } }) {
return <button onClick={() => alert(user.name)}>{user.name}</button>;
}