React Server Components
Коротко:
React Server Components (RSC) — компоненты, рендерящиеся только на сервере. Не попадают в client bundle → меньше JS на клиенте. Могут быть async (fetch прямо в компоненте). Next.js 13+ App Router — default RSC. Paradigm: data fetching рядом с UI, streaming через Suspense, client components только где нужна интерактивность (use client).
Ниже: подробности, пример, смежные термины, FAQ.
Подробности
- Server-only: no bundle cost, access к DB/env vars direct
- Client components: "use client" directive, обычный React с hooks
- Serialization: props между server↔client должны быть JSON-serializable
- Suspense: streaming render boundary (loading.tsx в Next.js)
- Caching: fetch() automatically cached в RSC
Пример
// app/posts/page.tsx (Server Component)
async function PostList() {
const posts = await db.post.findMany(); // direct DB access
return posts.map(p => <Post key={p.id} {...p} />);
}
// Client component
'use client';
function LikeButton({ postId }) {
const [liked, setLiked] = useState(false);
return <button onClick={() => setLiked(true)}>♥</button>;
}Смежные термины
Больше по теме
Часто задаваемые вопросы
RSC vs SSR?
Classic SSR: render HTML на сервере + hydrate весь React client-side. RSC: серверные компоненты НЕ hydrate, только клиентские = меньше JS.
Когда client component?
Когда нужен useState, useEffect, onClick, onChange. Всё остальное — по умолчанию server.
Поддерживаются все фреймворки?
Next.js 13+ (App Router) — production. Remix — planned. Vanilla React — нет (нужен bundler + framework).