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
- Zerowy rozmiar pakietu: Zależności używane w Server Components (jak parsery markdown lub ciężkie biblioteki dat) pozostają na serwerze.
- Bezpośredni dostęp do backendu: Możesz odpytywać bazę danych bezpośrednio wewnątrz komponentu bez ujawniania endpointów API.
- 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
- 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.
- Dodawanie obsługi zdarzeń: Nie możesz dodać
onClickanionChangedo 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.