1~
2React 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.
3~
4## Czym są Server Components?
5~
6Tradycyjnie 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.
7~
8### Korzyści
9~
101.  **Zerowy rozmiar pakietu**: Zależności używane w Server Components (jak parsery markdown lub ciężkie biblioteki dat) pozostają na serwerze.
112.  **Bezpośredni dostęp do backendu**: Możesz odpytywać bazę danych bezpośrednio wewnątrz komponentu bez ujawniania endpointów API.
123.  **Automatyczne dzielenie kodu**: Client components importowane po stronie serwera są automatycznie dzielone na osobne części kodu.
13~
14## Wzorzec pobierania danych
15~
16Z RSC możesz uczynić swoje komponenty `async` i oczekiwać danych bezpośrednio.
17~
18```tsx
19// app/users/page.tsx
20import { db } from '@/lib/db';
21~
22export default async function UsersPage() {
23  const users = await db.user.findMany();
24~
25  return (
26    <main>
27      <h1>Users</h1>
28      <ul>
29        {users.map((user) => (
30          <li key={user.id}>{user.name}</li>
31        ))}
32      </ul>
33    </main>
34  );
35}
36```
37~
38### Suspense do strumieniowania
39~
40Ponieważ pobieranie danych może być powolne, opakuj swoje komponenty w `<Suspense>`, aby natychmiast wyświetlić zapasowy UI podczas ładowania danych.
41~
42```tsx
43import { Suspense } from 'react';
44import UserList from './UserList';
45import LoadingSkeleton from './LoadingSkeleton';
46~
47export default function Page() {
48  return (
49    <section>
50      <h1>My Users</h1>
51      <Suspense fallback={<LoadingSkeleton />}>
52        <UserList />
53      </Suspense>
54    </section>
55  );
56}
57```
58~
59## Łączenie Server i Client Components
60~
61Jednym z najbardziej mylących aspektów jest to, jak łączyć Server i Client components.
62~
63**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.
64~
65### Wzorzec „Children"
66~
67```tsx
68// ClientComponent.tsx
69'use client';
70~
71import { useState } from 'react';
72~
73export default function ClientWrapper({ children }) {
74  const [count, setCount] = useState(0);
75~
76  return (
77    <div onClick={() => setCount((c) => c + 1)}>
78      Count: {count}
79      {children} {/* This can be a Server Component! */}
80    </div>
81  );
82}
83```
84~
85```tsx
86// ServerPage.tsx
87import ClientWrapper from './ClientWrapper';
88import ServerContent from './ServerContent';
89~
90export default function Page() {
91  return (
92    <ClientWrapper>
93      <ServerContent /> {/* This works perfectly */}
94    </ClientWrapper>
95  );
96}
97```
98~
99## Typowe pułapki
100~
1011.  **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.
1022.  **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.
103~
104## Podsumowanie
105~
106React 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.
107~