Server Component
別名: サーバーコンポーネント / React Server Component / RSC
サーバー側でだけレンダリングされ、HTML と RSC ペイロードとしてブラウザへ送られる React コンポーネント。state や effect は持てず、Next.js App Router の既定。
公開:
定義
Server Component（サーバーコンポーネント、RSC）はサーバー側でだけレンダリングされる React コンポーネント。
HTML と RSC ペイロードに変換されてブラウザへ送られ、クライアント側で JavaScript として再実行されない。useState などのフックや onClick などのイベントハンドラは使えず、Next.js App Router ではすべてのコンポーネントが既定でこれとして扱われる。
詳細
サーバー側でデータ取得から HTML 生成までを完結させ、クライアントへ送る JS バンドルを小さく保てるのが最大の特徴。
データベースや内部 API を直接 await で呼べる一方、ブラウザ専用 API（window / localStorage）には触れない。
インタラクションが必要な箇所だけ別ファイルに切り出し、ファイル先頭に "use client" を付けて Client Component として動かすのが基本設計。React 18 で導入され、Next.js 13 の App Router で実用化された。
よくある誤解
「Server Component = SSR」と混同されやすいが、SSR は Client Component を初回だけサーバーでレンダリングする仕組みで、Server Component は「そもそもクライアントへ送られない」点が異なる。"use client" を書いたファイルも初回は SSR され、ハイドレーション後は通常の React として動作する。
関連
use client が認識されないエラー や Server Action が実行できない と併せて読むと境界設計が整理しやすい。Hydration とも密接に関係する概念。