react-patterns

Vercel React のベストプラクティス（ローカル／Docker）

Vercel が管理する、React および Next.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです。このバージョンでは、ローカルインストールまたは Docker 化されたデプロイにおいて、特に重要なパターンを取り上げます。

目的

非同期処理のウォーターフォールを避け、クライアントのペイロードを削減し、ホステッド環境やエッジ固有の最適化に頼らずに UI の応答性を保つための、重要な項目に絞ったチェックリストを提供します。

適用する場面

• React コンポーネントや Next.js ページの作成またはリファクタリング
• Server Actions、Route Handlers、データ取得の実装
• ローカルインストールの起動時間やメモリ使用量の削減
• UI の応答が遅い場合や、ハイドレーションに時間がかかる場合のデバッグ
• パフォーマンスのリグレッションを防ぐためのコードレビュー

オフラインおよび Docker を重視するポイント

• SEO よりもコールドスタート時と定常状態での応答性を優先して最適化します。
• サーバープロセスが存続するため、プロセス内キャッシュを使用します。
• ローカル API やデータベースであっても、逐次的な await は避けます。
• 重要度の低い処理は、レンダリング後またはレスポンス送信後まで遅らせます。
• RSC の props を最小限にし、ハイドレーションとメモリのオーバーヘッドを抑えます。

主な知見

• Promise.all または better-all を使用して処理を早く開始し、await を遅らせることで、非同期処理のウォーターフォールを解消します。
• Suspense 境界を使って UI をストリーミングし、データ取得のためにページ全体をブロックしないようにします。
• 動的インポート、条件付き読み込み、直接インポートによって、初期読み込みとメモリ使用量を削減します。
• RSC のペイロードを最小限にします。使用するフィールドのみを渡し、シリアライズされたデータの重複を避けます。
• 頻繁に実行されるサーバー処理をキャッシュします。リクエストごとには React.cache、リクエストをまたいだ再利用には LRU を使用します。
• メモ化したサブツリー、遅延状態初期化、トランジション、大規模なリストでの content-visibility によって、クライアント側の処理を削減します。

中核となるパターン

• ウォーターフォールを解消する async-parallel および async-api-routes
• 遅いセクションをストリーミングする async-suspense-boundaries
• 起動コストを削減する bundle-barrel-imports および bundle-dynamic-imports
• RSC ペイロードを縮小する server-serialization および server-dedup-props
• 頻繁に実行される処理を再利用する server-cache-react および server-cache-lru
• UI の応答性を高める rerender-lazy-state-init および rerender-transitions
• 長いリスト向けの rendering-content-visibility
• フェッチを重複排除する client-swr-dedup

出力

• オフラインに重点を置いた簡潔なガイド REACT_PATTERNS.md
• コンパイル済みの完全なリファレンス AGENT.md

優先度別のルールカテゴリ

優先度	カテゴリ	影響	プレフィックス
1	ウォーターフォールの解消	重大	async-
2	バンドルサイズの最適化	重大	bundle-
3	サーバー側のパフォーマンス	高	server-
4	クライアント側のデータ取得	中〜高	client-
5	再レンダリングの最適化	中	rerender-
6	レンダリングのパフォーマンス	中	rendering-
7	JavaScript のパフォーマンス	低〜中	js-
8	高度なパターン	低	advanced-

使用方法

簡潔なガイダンスについては、まず REACT_PATTERNS.md をご覧ください。

コンパイル済みの完全なドキュメント

すべてのルールを詳しく記載した完全なガイドについては、AGENT.md をご覧ください。