React Server Components（RSC） とは？

従来のSSRはサーバーでHTMLを生成してブラウザに送るけど、その後ブラウザ側でReactを「ハイドレーション」する必要があってJSバンドルも全部送っていたんだ。RSCはコンポーネント自体がサーバーにしか存在しないから、そのコンポーネントのJSはブラウザに届かないんだよ。

インタラクティブな部分は「クライアントコンポーネント」として従来どおりブラウザで動かすんだ。RSCとクライアントコンポーネントを組み合わせて、「動かす必要がある部分だけ」JSを送る設計が可能になるんだよ。

大きく3つあるよ。①バンドルサイズの削減、②DBや秘密のAPIキーをサーバー内部で使えるのでセキュリティ向上、③データ取得とレンダリングがサーバー1か所で完結するので通信の往復が減ることだね。

サーバーコンポーネントには「useState」「useEffect」などのフックが使えないし、ブラウザイベントも扱えないんだ。動的なUIや状態が必要な部分はクライアントコンポーネントが必須だよ。「どこをサーバー、どこをクライアントにするか」という設計判断が重要になるんだね。

「use client」ディレクティブを追加した時点でクライアントコンポーネントになる仕組みで、デフォルトはサーバーコンポーネントだよ。考え方が従来と逆になるから最初は混乱しやすいんだけど、「インタラクション不要ならサーバーのまま」と覚えると整理しやすいね。RSCはフロントエンドとバックエンドの境界を再定義している重要なパラダイムシフトだよ。