RSC (React Server Components)
名詞 · React
一部のコンポーネントがサーバー上でのみ実行され、JavaScriptコードをブラウザに送信することなくデータベースやAPIに直接アクセスするReactの新しいパラダイムです。クライアントバンドルのサイズを劇的に削減します。
Next.jsにネイティブに統合された革新的なアーキテクチャで、コンポーネントを2つのカテゴリに分離します。静的レンダリングとデータアクセスのためのServer Componentsと、インタラクティビティのためのClient Componentsです。ブラウザに送信されるものを自動的に最適化します。
サーバーコンポーネントが事前にデータを解決し、結果のHTMLのみをクライアントに送信することで、パフォーマンスと機能性の歴史的なトレードオフを排除するReactエコシステムの大きな進化です。
React Server Components（RSC）は、サーバー上でのみ実行される新しいタイプのReactコンポーネントです。JavaScriptコードをユーザーのブラウザに送信することなく、データベース、ファイルシステム、APIに直接アクセスできます。レンダリング結果はHTMLとシリアライズされたペイロードの形式でクライアントに送信されます。当社では、Next.js経由でネイティブにRSCを使用し、インタラクティビティに必要なJavaScriptのみがブラウザに送信されるアプリケーションを構築しています。
従来のReactコンポーネント（Client Components）はブラウザにダウンロード、パース、実行され、すべてのコード、依存関係、ロジックがJavaScriptバンドルに含まれます。一方、RSCはサーバー上でのみ実行されます。パージングライブラリ、データベースアクセスライブラリ、フォーマッティングライブラリなどの依存関係はクライアントに送信されることはありません。当社では、この区別を活用してJavaScriptバンドルサイズを最大70%削減し、ページの読み込みを大幅に高速化しています。
RSCは、ブラウザから不要なJavaScriptを排除することでWebパフォーマンスに革命をもたらします。従来、静的テキストを表示するだけのコンポーネントでも、そのJavaScriptコードがクライアントに送信されていました。RSCでは、結果のHTMLのみが送信され、サーバーサイドの依存関係（markdownライブラリやORMなど）がクライアントバンドルを重くすることはありません。当社では、RSCアーキテクチャに移行するプロジェクトでTime to InteractiveとLargest Contentful Paintの劇的な改善を確認しています。
RSCは、サーバーコンポーネントとその依存関係のすべてのコードをクライアントJavaScriptから自動的に除外することでバンドルサイズを削減します。RSCで使用される日付フォーマットライブラリ、Markdownパーサー、データベースクライアントはブラウザにダウンロードされるバンドルには表示されません。当社では、Server Componentsの割合を最大化するようプロジェクトを構造化し、厳密に必要なユーザーインタラクションのためだけにClient Componentsに切り替えています。
RSCはSEOに非常にプラスの影響があります。コンテンツがサーバー上で直接HTMLとしてレンダリングされ、JavaScriptの実行なしにインデックスロボットに即座に読み取り可能だからです。さらに、ページはより軽量で高速に読み込まれ、GoogleのランキングファクターであるCore Web Vitalsが改善されます。当社では、コンテンツページがLighthouseスコア100に近い値を達成するようRSCを活用し、オーガニックの可視性を最大化しています。
はい、これはまさにReactとNext.jsが推奨するモデルです。Server Componentsは静的レンダリング、データアクセス、レイアウトを処理し、Client Componentsはインタラクティビティ（フォーム、アニメーション、状態管理）を担当します。Server ComponentはClient Componentをインポートしてレンダリングでき、最適なレイヤードアーキテクチャを作成します。当社では、各レベルがその責任に対して最も効率的なタイプを使用するコンポーネントツリーを設計しています。
RSCでは、中間APIルートやクライアントサイドのデータフェッチレイヤーを作成することなく、コンポーネントのコードから直接データベースやAPIにクエリを実行できます。サーバーコンポーネントはデータを非同期に解決し、レンダリングされた結果をHTMLとしてブラウザに送信します。当社では、このシンプルさを活用してプロジェクトのアーキテクチャの複雑さを軽減し、責任の明確な分離を維持しながらボイラープレートコードの層を排除しています。
RSCは、APIキー、データベースアクセストークン、機密のビジネスロジックがサーバー上にのみ保持され、クライアントのJavaScriptに公開されることがないため、セキュリティを大幅に強化します。悪意のあるユーザーがバンドルを調べてプライベートエンドポイントやシークレットを発見することはできません。当社では、RSCをクライアントサイドでの漏洩リスクなくコンポーネント内で機密データを操作できる重要なセキュリティレバーとみなしています。
Next.jsのRSCアーキテクチャに移行することは、長期的なプロジェクトのパフォーマンス、セキュリティ、保守性への投資です。ページの読み込みが速くなり、バンドルが軽量になり、データの保護が向上し、コードの保守が容易になります。当社では、カスタムRSCアーキテクチャを設計し、Webアプリケーションを市場での持続的な競争優位に変える戦略的移行を企業にサポートしています。