Next.js App Router: Server Component vs Client Component — jaka jest różnica?

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>;
}

Typowe pułapki

• Zrobienie wysokopoziomowego layoutu jako Client Component (wymusza dużo JS w całym drzewie).
• Próba użycia `useState`/`useEffect` w Server Components.
• Przekazywanie nie-serializowalnych wartości z serwera do klienta.