Opanowanie React Server Components w 2026 roku

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.