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~