React Server Components elsajatitasa 2026-ban

A 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.

Mik azok a Server Components?

A Server Components lehetove teszik, hogy komponenseket kizarolag a szerveren rendereljunk. A kodjuk soha nem kerul a bongeszobe.

Elonyok

1. Nulla csomag meret: A Server Components-ben hasznalt fuggosegek a szerveren maradnak.
2. Kozvetlen backend hozzaferes: Kozvetlenul a komponensben kerdezheted le az adatbazist.
3. Automatikus kodfelosztas: A szerver oldalon importalt kliens komponensek automatikusan feloszlasra kerulnek.

Adatlekeresі minta

// app/users/page.tsx
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();

  return (
    <main>
      <h1>Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </main>
  );
}

Suspense streaminghez

import { Suspense } from 'react';
import UserList from './UserList';
import LoadingSkeleton from './LoadingSkeleton';

export default function Page() {
  return (
    <section>
      <h1>My Users</h1>
      <Suspense fallback={<LoadingSkeleton />}>
        <UserList />
      </Suspense>
    </section>
  );
}

Server es Client Components osszekapcsolasa

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.

A "Children" minta

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientWrapper({ children }) {
  const [count, setCount] = useState(0);

  return (
    <div onClick={() => setCount((c) => c + 1)}>
      Count: {count}
      {children}
    </div>
  );
}

// ServerPage.tsx
import ClientWrapper from './ClientWrapper';
import ServerContent from './ServerContent';

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent />
    </ClientWrapper>
  );
}

Gyakori buktatok

1. Context hasznalata Server Components-ben: A Context kliens oldali koncepcio.
2. Esemenykezelok hozzaadasa: Nem adhatsz onClick vagy onChange-t egy Server Component-hez.

Osszefoglalas

A 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.