1 
2A React Server Components (RSC) alapjaiban valtoztatta meg a React alkalmazasok epiteset. A renderelesi logika szerverre helyezesevel jelentosen csokkenthetjuk a kliensnek kuldott JavaScript csomagot. Ebben a cikkben halado mintakat es bevalt gyakorlatokat vizsgalunk az RSC kihasznalasahoz 2026-ban.
3 
4## Mik azok a Server Components?
5 
6A **Server Components** lehetove teszik, hogy komponenseket _kizarolag_ a szerveren rendereljunk. A kodjuk soha nem kerul a bongeszobe.
7 
8### Elonyok
9 
101.  **Nulla csomag meret**: A Server Components-ben hasznalt fuggosegek a szerveren maradnak.
112.  **Kozvetlen backend hozzaferes**: Kozvetlenul a komponensben kerdezheted le az adatbazist.
123.  **Automatikus kodfelosztas**: A szerver oldalon importalt kliens komponensek automatikusan feloszlasra kerulnek.
13 
14## Adatlekeresі minta
15 
16```tsx
17// app/users/page.tsx
18import { db } from '@/lib/db';
19 
20export default async function UsersPage() {
21  const users = await db.user.findMany();
22 
23  return (
24    <main>
25      <h1>Users</h1>
26      <ul>
27        {users.map((user) => (
28          <li key={user.id}>{user.name}</li>
29        ))}
30      </ul>
31    </main>
32  );
33}
34```
35 
36### Suspense streaminghez
37 
38```tsx
39import { Suspense } from 'react';
40import UserList from './UserList';
41import LoadingSkeleton from './LoadingSkeleton';
42 
43export default function Page() {
44  return (
45    <section>
46      <h1>My Users</h1>
47      <Suspense fallback={<LoadingSkeleton />}>
48        <UserList />
49      </Suspense>
50    </section>
51  );
52}
53```
54 
55## Server es Client Components osszekapcsolasa
56 
57**Alapszabaly**: A Server Components importalhat Client Components-t. A Client Components _nem importalhat_ kozvetlenul Server Components-t. Azonban atadhatod a Server Component-et `children`-kent egy Client Component-nek.
58 
59### A "Children" minta
60 
61```tsx
62// ClientComponent.tsx
63'use client';
64 
65import { useState } from 'react';
66 
67export default function ClientWrapper({ children }) {
68  const [count, setCount] = useState(0);
69 
70  return (
71    <div onClick={() => setCount((c) => c + 1)}>
72      Count: {count}
73      {children}
74    </div>
75  );
76}
77```
78 
79```tsx
80// ServerPage.tsx
81import ClientWrapper from './ClientWrapper';
82import ServerContent from './ServerContent';
83 
84export default function Page() {
85  return (
86    <ClientWrapper>
87      <ServerContent />
88    </ClientWrapper>
89  );
90}
91```
92 
93## Gyakori buktatok
94 
951.  **Context hasznalata Server Components-ben**: A Context kliens oldali koncepcio.
962.  **Esemenykezelok hozzaadasa**: Nem adhatsz `onClick` vagy `onChange`-t egy Server Component-hez.
97 
98## Osszefoglalas
99 
100A React Server Components nem csupan egy funkcio; paradigmavaltas. A szerver es kliens kozotti hatar megertesevel olyan alkalmazasokat epithetsz, amelyek egyszerre rendkivul interaktivak es hihetetlenul gyorsak.
101