Server és Client komponensek

Ez az App Router legfontosabb koncepciója, amelyet minden Next.js fejlesztőnek mélyen meg kell értenie.

4. Server és Client komponensek

Ez az App Router legfontosabb koncepciója, amelyet minden Next.js fejlesztőnek mélyen meg kell értenie.

Alapelv

Az App Routerben minden komponens alapértelmezetten Server Component. Ez azt jelenti, hogy a szerveren fut le, és soha nem kerül a kliens JavaScript bundle-be.

A Client Componentté váláshoz explicit jelzés kell:

'use client'

Server Components

// app/blog/page.tsx – Server Component (nincs "use client")
async function getBlogPosts() {
  // Ez a kód CSAK a szerveren fut le
  // Közvetlenül hozzáférhet adatbázishoz, fájlrendszerhez, env változókhoz
  const posts = await db.posts.findAll()
  return posts
}

export default async function BlogPage() {
  const posts = await getBlogPosts()

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

Mit tehetnek meg a Server Componentek?

Async/await direkt a komponens függvényen
Adatbázis hozzáférés
Titkos env változók olvasása (API kulcsok)
Fájlrendszer hozzáférés
Server-only könyvtárak importja

Mit NEM tehetnek meg?

useState, useEffect és más React hookok
Böngésző API-k (window, document, localStorage)
Event listenersek (onClick, onChange, stb.)

Client Components

'use client'

// components/Counter.tsx – Client Component
import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>Számláló: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Növelés
      </button>
    </div>
  )
}

Mikor szükséges a 'use client'?

React hookok használata (useState, useEffect, useContext, stb.)
Eseménykezelők (onClick, onChange, onSubmit)
Böngésző-specifikus API-k
Valós idejű frissítések (WebSocket, SSE)

Döntési fa: server vagy client?

Szükséged van state-re / hookokra?
  ↓ Igen
  Client Component

Szükséged van event listenerekre?
  ↓ Igen
  Client Component

Közvetlenül hozzáférsz adatbázishoz / titkos adathoz?
  ↓ Igen
  Server Component (kötelező)

Statikus tartalom, nincs interaktivitás?
  ↓ Igen
  Server Component (ajánlott)

Server és Client Components kombinálása

A legjobb architektúra: Server Components a "külső réteg" (adatlekérés, layout), Client Components a "levelek" (interaktív szigetek):

// app/dashboard/page.tsx – Server Component
import { UserStats } from '@/components/UserStats' // Server
import { InteractiveChart } from '@/components/InteractiveChart' // Client

export default async function DashboardPage() {
  const stats = await fetchUserStats() // szerver oldali adatlekérés

  return (
    <div>
      <UserStats data={stats} />        {/* Server Component */}
      <InteractiveChart data={stats} /> {/* Client Component – 'use client' belül */}
    </div>
  )
}

Összehasonlítás

	Server Component	Client Component
Alapértelmezett	✅ Igen	❌ Nem (jelezni kell)
Async/await	✅ Igen	❌ Nem (useEffect kell)
useState, useEffect	❌ Nem	✅ Igen
Event handlers	❌ Nem	✅ Igen
Adatbázis hozzáférés	✅ Igen	❌ Nem
Bundle méret hatás	❌ Nulla (szerveren fut)	✅ Növeli a bundle-t
SEO	✅ Kiváló	⚠️ Korlátozott

📝 Összefoglaló – 4. fejezet

Minden App Router komponens alapból Server Component – explicit 'use client' kell a klienshez
Server Components nulla JavaScript bundle hatással bírnak, közvetlenül hozzáférnek adatbázishoz
Client Components kellenek hookokhoz, event handlerekhez és böngésző API-khoz
A legjobb pattern: Server Componentek kívül, Client Componentek belül (leaf components)

Server és Client komponensek

On this page