React Server Components (RSC) はサーバー上でのみレンダリングされます — JavaScriptはブラウザに送信されません。App Routerでは、すべてのコンポーネントがデフォルトでServer Componentです。クライアント動作を明示的にオプトインする必要があります。
Server Componentsは、App Routerの決定的な特徴です。
クライアントバンドルサイズを削減（ダウンロード/解析するJSが少ない）し、APIなしでセキュアなサーバー側のデータアクセスを直接可能にし、パフォーマンスとSEOを向上させます。
それらがデフォルトであることを知り、コンポーネントをClient Componentにするしかないものが何であるかを知ることは、App Routerアプリを効率的に構造化するために根本的に重要です。
// app/users/page.tsx — a Server Component (no "use client")
import db from "@/lib/db";
export default async function Users() {
const users = await db.user.findMany(); // ✅ direct DB access, runs on server
return (
<ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>
);
}
Server ComponentsはAsync化でき、データを直接awaitでき、サーバーのみのリソース（データベース、ファイルシステム、シークレット）にアクセスできます — サーバーで実行されるためです。データを取得するためのAPIレイヤーは不要で、シークレットはクライアントに到達しません。
ブラウザはレンダリングされたHTML/UIを受け取ります。コンポーネントのコードまたはその依存関係ではありません。マークダウンまたは日付ライブラリを使用するServer Componentは、そのライブラリをまったくブラウザに送信しません — バンドルサイズが大幅に削減されます。
// ❌ 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"）。