React Server Components

概要

React Server Components（RSC）の実装パターンとNext.js App Routerにおけるベストプラクティスを提供する専門スキル。サーバーコンポーネントとクライアントコンポーネントの責務分離、データフェッチの最適化、Suspenseとストリーミングの活用を支援します。

ワークフロー

Phase 1: アーキテクチャ分析

目的: RSCアーキテクチャの適用範囲と境界を定義する

アクション:

1. references/basics.md でRSCの基本概念を確認
2. references/server-client-boundaries.md でコンポーネント境界を理解
3. プロジェクトの要件とRSCの適合性を評価

Task: agents/analyze-architecture.md を参照

Phase 2: コンポーネント設計

目的: Server ComponentsとClient Componentsの適切な分離を設計する

アクション:

1. references/server-client-boundaries.md で境界設計パターンを確認
2. references/composition-patterns.md でコンポーネント構成を検討
3. テンプレートをベースに実装

Task: agents/design-components.md を参照

Phase 3: データフェッチ最適化

目的: RSCの並列データフェッチとストリーミングを最適化する

アクション:

1. references/data-fetching-patterns.md で最適なパターンを選択
2. キャッシュ戦略を検討
3. Suspense境界を適切に配置

Task: agents/optimize-data-fetching.md を参照

Phase 4: 検証と記録

目的: 実装の検証と実行記録の保存

アクション:

1. バンドルサイズを検証
2. コンポーネント境界の妥当性を確認
3. scripts/log_usage.mjs を実行して記録を残す

Task: agents/validate-implementation.md を参照

Task仕様ナビ

詳細仕様: 各Taskの詳細は agents/ ディレクトリを参照

ベストプラクティス

すべきこと

• Server Componentsをデフォルトとし、必要な場合のみClient Components（'use client'）を使用する
• データフェッチはできるだけサーバー側で行い、並列フェッチを活用する
• Suspense境界を適切に配置し、ユーザー体験を最適化する
• async/await を直接Server Components内で使用する（useEffect不要）
• クライアント側のJavaScriptを最小化し、バンドルサイズを削減する
• references/composition-patterns.md のパターンに従って、props drilling を回避する
• キャッシュ戦略（cache(), revalidate）を適切に設定する
• references/server-client-boundaries.md で境界設計の原則を確認する

避けるべきこと

• Server Components内でクライアント専用API（useState, useEffect等）を使用する
• Client Components内で直接データベース接続やAPIキーを扱う
• 不要にClient Componentsを使用し、クライアントバンドルを肥大化させる
• Suspense境界なしで非同期処理を行い、ウォーターフォールを引き起こす
• Server Componentsをprops経由でClient Componentsに渡す（children経由で渡すべき）
• 'use client' ディレクティブを親コンポーネントに配置し、子までクライアント化する
• fetch結果を適切にキャッシュせず、同じリクエストを重複実行する
• エラーハンドリングを省略し、エラー時のUXを悪化させる
• テスト戦略を立てずに実装を進める
• 既存のPages Router パターンをそのまま適用する

リソース参照

references/（詳細知識）

scripts/（決定論的処理）

assets/（テンプレート）

変更履歴