1~
2React Server Components (RSC) fundamentalne zmenily zpusob, jakym stavime aplikace v Reactu. Presunutim logiky renderovani na server muzeme vyrazne snizit JavaScript bundle odesilany klientovi. V tomto clanku prozkoumame pokrocile vzory a osvedcene postupy pro vyuziti RSC v roce 2026.
3~
4## Co jsou Server Components?
5~
6**Server Components** nam umoznuji renderovat komponenty _vyhradne_ na serveru. Jejich kod neni nikdy odeslan do prohlizece.
7~
8### Vyhody
9~
101.  **Nulova velikost bundlu**: Zavislosti pouzivane v Server Components zustavaji na serveru.
112.  **Primy pristup k backendu**: Muzete dotazovat databazi primo uvnitr komponenty.
123.  **Automaticke deleni kodu**: Klientske komponenty importovane na strane serveru jsou automaticky rozdeleny.
13~
14## Vzor nacitani dat
15~
16```tsx
17// app/users/page.tsx
18import { db } from '@/lib/db';
19~
20export default async function UsersPage() {
21  const users = await db.user.findMany();
22~
23  return (
24    <main>
25      <h1>Users</h1>
26      <ul>
27        {users.map((user) => (
28          <li key={user.id}>{user.name}</li>
29        ))}
30      </ul>
31    </main>
32  );
33}
34```
35~
36### Suspense pro streaming
37~
38```tsx
39import { Suspense } from 'react';
40import UserList from './UserList';
41import LoadingSkeleton from './LoadingSkeleton';
42~
43export default function Page() {
44  return (
45    <section>
46      <h1>My Users</h1>
47      <Suspense fallback={<LoadingSkeleton />}>
48        <UserList />
49      </Suspense>
50    </section>
51  );
52}
53```
54~
55## Prolnani Server a Client Components
56~
57**Pravidlo**: Server Components mohou importovat Client Components. Client Components _nemohou_ importovat Server Components primo. Muzete vsak predat Server Component jako `children` Client Component.
58~
59### Vzor "Children"
60~
61```tsx
62// ClientComponent.tsx
63'use client';
64~
65import { useState } from 'react';
66~
67export default function ClientWrapper({ children }) {
68  const [count, setCount] = useState(0);
69~
70  return (
71    <div onClick={() => setCount((c) => c + 1)}>
72      Count: {count}
73      {children}
74    </div>
75  );
76}
77```
78~
79```tsx
80// ServerPage.tsx
81import ClientWrapper from './ClientWrapper';
82import ServerContent from './ServerContent';
83~
84export default function Page() {
85  return (
86    <ClientWrapper>
87      <ServerContent />
88    </ClientWrapper>
89  );
90}
91```
92~
93## Bezne nastrahy
94~
951.  **Pouziti Context v Server Components**: Context je koncept na strane klienta.
962.  **Pridavani event handleru**: Nemuzete pridat `onClick` nebo `onChange` k Server Component.
97~
98## Zaver
99~
100React Server Components nejsou jen funkce; jsou to zmena paradigmatu. Pochopenim hranice mezi serverem a klientem muzete stavet aplikace, ktere jsou zaroven vysoce interaktivni a neuveritelne rychle.
101~