React 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.
Co jsou Server Components?
Server Components nam umoznuji renderovat komponenty vyhradne na serveru. Jejich kod neni nikdy odeslan do prohlizece.
Vyhody
- Nulova velikost bundlu: Zavislosti pouzivane v Server Components zustavaji na serveru.
- Primy pristup k backendu: Muzete dotazovat databazi primo uvnitr komponenty.
- Automaticke deleni kodu: Klientske komponenty importovane na strane serveru jsou automaticky rozdeleny.
Vzor nacitani dat
// 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 pro streaming
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> ); }
Prolnani Server a Client Components
Pravidlo: Server Components mohou importovat Client Components. Client Components nemohou importovat Server Components primo. Muzete vsak predat Server Component jako children Client Component.
Vzor "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} </div> ); }
// ServerPage.tsx import ClientWrapper from './ClientWrapper'; import ServerContent from './ServerContent'; export default function Page() { return ( <ClientWrapper> <ServerContent /> </ClientWrapper> ); }
Bezne nastrahy
- Pouziti Context v Server Components: Context je koncept na strane klienta.
- Pridavani event handleru: Nemuzete pridat
onClickneboonChangek Server Component.
Zaver
React 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.