React Server Components (RSC) отрисовываются только на сервере — их JavaScript никогда не отправляется в браузер. В App Router каждый компонент по умолчанию является Server Component; вы явно подключаете поведение на стороне клиента.
db ;
() {
users = db..();
(
);
}
Server Components могут быть async, напрямую await-ить данные и получать доступ к ресурсам только на сервере (база данных, файловая система, secrets) — потому что они работают на сервере. Не требуется API-слой для получения данных, и secrets никогда не попадают на клиент.
Браузер получает отрисованный HTML/UI, а не код компонента и его зависимости. Server Component, использующий тяжелую библиотеку markdown или date, не отправляет эту библиотеку в браузер — кардинально уменьшает размер бандла.
// ❌ these only work in Client Components
useState, useEffect, useRef // hooks (no interactivity/state on the server)
onClick, onChange // event handlers
window, localStorage, document // browser-only APIs
Нет интерактивности, состояния, эффектов или API браузера — это требует Client Component.
// Server Component fetches data, passes it to an interactive Client Component
import LikeButton from "./LikeButton"; // a "use client" component
export default async function Post({ id }) {
const post = await getPost(id); // server-side fetch
return <><Article post={post} /><LikeButton postId={id} /></>;
}
Паттерн: Server Components обрабатывают данные/структуру; встраивайте Client Components только там, где требуется интерактивность ("islands").
Server Components — определяющая особенность App Router.
Они уменьшают размер клиентского бандла (меньше JS для загрузки/парсинга), позволяют прямой безопасный доступ к данным на сервере без API и улучшают производительность и SEO.
Знать, что они установлены по умолчанию — и что заставляет компонент стать Client Component — фундаментально для эффективной структуризации приложений App Router.