React Server Componentsとは?
React Server Components(RSC) は、Server ComponentsのReact公式名称。サーバー側で描画されるコンポーネントで、クライアントに送信されるJavaScriptバンドルから除外されるのが構造上の最大の特徴です(Introducing Zero-Bundle-Size React Server Components — React 公式ブログ, 2020-12-21)。
ポイント
async関数として定義可能- DB・ファイル・外部APIに直接アクセス
- クライアントにはステートや対話処理のみ送信
- Next.js App Routerで標準(Next.js 13.4 で App Router が stable, 2023-05-04)
パフォーマンス特性
公式ドキュメントが明記している構造的な性質:
- Server Components のコードはクライアントの JavaScript バンドルに含まれないため、ブラウザに送るJSの総量を削減できる(Next.js 13.4 公式ブログ)
- ハイドレーション対象が減るため、Time to Interactive / Core Web Vitals の改善につながる(Server and Client Components — Next.js Docs)
- 大きな依存ライブラリをサーバ側に閉じ込められるため、アプリ規模が大きくなってもクライアントランタイムが膨張しにくい(Understanding React Server Components — Vercel, 2023)
QUOTE
改善幅は「どれだけのコードを Server Components 側に寄せられるか」「fetch/レンダー特性」に強く依存するため、共通の固定値は存在しません。実プロダクトでの効果は計測が前提です。