サーバーコンポーネント (RSC) とは？

Next.js 13以降のApp Routerで採用されているサーバーコンポーネント（React Server Components, RSC）は、レンダリング処理をサーバー側で実行し、生成されたHTMLやコンポーネントツリーの情報をクライアントに送る新しいReactのパラダイムです。

サーバーコンポーネントの主な特徴

• データ取得の容易さ: サーバー側で直接データベースやAPIからデータをフェッチできます。これにより、クライアント側での追加のデータ取得処理が不要になることが多いです。
• バンドルサイズの削減: サーバーでのみ使用される依存関係（例：データベースクライアント、マークダウンパーサーなど）は、クライアントバンドルに含まれないため、アプリケーションの初回ロード速度が向上します。
• セキュリティ向上: 機密性の高いデータやロジック（例：APIキー）をクライアントに漏らすことなく、サーバー側で安全に処理できます。

クライアントコンポーネントとの使い分け

デフォルトでは、App Router内の全てのコンポーネントはサーバーコンポーネントとして扱われます。インタラクティブな機能やReactフック（useState, useEffectなど）を使用する必要があるコンポーネントのみ、ファイルの先頭に "use client" ディレクティブを追加してクライアントコンポーネントとして定義します。

例：

// サーバーコンポーネント (デフォルト)
async function PostList() {
  const posts = await fetchPostsFromDB();
  return (/* ... */);
}

// クライアントコンポーネント (インタラクティブな要素)
"use client";
import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (<button onClick={() => setCount(count + 1)}>{count}</button>);
}

開発におけるメリット

RSCを導入することで、特にパフォーマンスと開発体験において大きなメリットが得られます。必要な部分のみをクライアントに送り、サーバーの強力な環境を活かして高速な初期ロードとSEOに強いアプリケーション構築が可能になります。