React Server Components (RSC) fundamentalnie zmieniły sposób budowania aplikacji React. Przenosząc logikę renderowania na serwer, możemy znacznie zmniejszyć pakiet JavaScript wysyłany do klienta, co prowadzi do szybszych czasów ładowania i lepszych doświadczeń użytkownika. W tym artykule zbadamy zaawansowane wzorce i najlepsze praktyki wykorzystania RSC w 2026 roku.

Czym są Server Components?

Tradycyjnie komponenty React były renderowane w całości po stronie klienta (CSR) lub pre-renderowane na serwerze jako HTML (SSR), a następnie hydratowane po stronie klienta. Server Components pozwalają renderować komponenty wyłącznie na serwerze. Ich kod nigdy nie jest wysyłany do przeglądarki.

Korzyści

1. Zerowy rozmiar pakietu: Zależności używane w Server Components (jak parsery markdown lub ciężkie biblioteki dat) pozostają na serwerze.
2. Bezpośredni dostęp do backendu: Możesz odpytywać bazę danych bezpośrednio wewnątrz komponentu bez ujawniania endpointów API.
3. Automatyczne dzielenie kodu: Client components importowane po stronie serwera są automatycznie dzielone na osobne części kodu.

Wzorzec pobierania danych

Z RSC możesz uczynić swoje komponenty async i oczekiwać danych bezpośrednio.

// 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 do strumieniowania

Ponieważ pobieranie danych może być powolne, opakuj swoje komponenty w <Suspense>, aby natychmiast wyświetlić zapasowy UI podczas ładowania danych.

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

Łączenie Server i Client Components

Jednym z najbardziej mylących aspektów jest to, jak łączyć Server i Client components.

Zasada ogólna: Server Components mogą importować Client Components. Client Components nie mogą bezpośrednio importować Server Components. Możesz jednak przekazać Server Component jako children do Client Component.

Wzorzec „Children"

// 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} {/* This can be a Server Component! */}
    </div>
  );
}

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

export default function Page() {
  return (
    <ClientWrapper>
      <ServerContent /> {/* This works perfectly */}
    </ClientWrapper>
  );
}

Typowe pułapki

1. Używanie Context w Server Components: Context to koncepcja po stronie klienta. Jeśli musisz udostępniać dane po stronie serwera, przekaż je jako props lub użyj specjalistycznej pamięci podręcznej zakresu żądania.
2. Dodawanie obsługi zdarzeń: Nie możesz dodać onClick ani onChange do Server Component. Ta logika należy do generycznego Client Component jako węzeł liścia.

Podsumowanie

React Server Components to nie tylko funkcja; to zmiana paradygmatu. Rozumiejąc granicę między serwerem a klientem, możesz budować aplikacje, które są zarówno wysoce interaktywne, jak i niesamowicie szybkie.