Vercel React ベストプラクティス

React および Next.js アプリケーションの包括的なパフォーマンス最適化ガイドで、Vercel により保守されています。8つのカテゴリにわたる45のルールが含まれており、自動リファクタリングとコード生成を導くために影響度で優先順位付けされています。

使用場面

以下の場合にこれらのガイドラインを参照してください：

• 新しい React コンポーネントまたは Next.js ページを作成している
• データ取得を実装している（クライアント側またはサーバー側）
• パフォーマンスの問題についてコードをレビューしている
• 既存の React/Next.js コードをリファクタリングしている
• バンドルサイズまたは読み込み時間を最適化している

ルールカテゴリを優先度順に表示

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

クイックリファレンス

1. ウォーターフォールの排除（CRITICAL）

• async-defer-await - 実際に使用される分岐に await を移動する
• async-parallel - 独立した操作に Promise.all() を使用する
• async-dependencies - 部分的な依存関係に better-all を使用する
• async-api-routes - API ルートで早期に promise を開始し、遅く await する
• async-suspense-boundaries - Suspense を使用してコンテンツをストリーミングする

2. バンドルサイズ最適化（CRITICAL）

• bundle-barrel-imports - バレルファイルを避け、直接インポートする
• bundle-dynamic-imports - 重いコンポーネントに next/dynamic を使用する
• bundle-defer-third-party - ハイドレーション後にアナリティクス/ロギングを読み込む
• bundle-conditional - 機能が有効化された時のみモジュールを読み込む
• bundle-preload - ホバー/フォーカス時に体感速度のため先読みする

3. サーバーサイドパフォーマンス（HIGH）

• server-cache-react - リクエスト単位の重複排除に React.cache() を使用する
• server-cache-lru - クロスリクエストキャッシュに LRU キャッシュを使用する
• server-serialization - クライアントコンポーネントに渡すデータを最小化する
• server-parallel-fetching - 取得を並列化するコンポーネントを再構成する
• server-after-nonblocking - ブロッキングされない操作に after() を使用する

4. クライアントサイドデータ取得（MEDIUM-HIGH）

• client-swr-dedup - 自動リクエスト重複排除に SWR を使用する
• client-event-listeners - グローバルイベントリスナーを重複排除する

5. 再レンダー最適化（MEDIUM）

• rerender-defer-reads - コールバック内のみで使用されるステートを購読しない
• rerender-memo - 負荷の高い作業をメモ化コンポーネントに抽出する
• rerender-dependencies - エフェクト内で プリミティブな依存関係を使用する
• rerender-derived-state - 生の値ではなく導出されたブール値を購読する
• rerender-functional-setstate - 安定したコールバックに関数形式の setState を使用する
• rerender-lazy-state-init - 負荷の高い値に useState に関数を渡す
• rerender-transitions - 緊急性の低い更新に startTransition を使用する

6. レンダリングパフォーマンス（MEDIUM）

• rendering-animate-svg-wrapper - SVG 要素ではなく div ラッパーをアニメーションさせる
• rendering-content-visibility - 長いリストに content-visibility を使用する
• rendering-hoist-jsx - 静的 JSX をコンポーネント外に抽出する
• rendering-svg-precision - SVG 座標精度を削減する
• rendering-hydration-no-flicker - クライアント専用データに inline script を使用する
• rendering-activity - 表示/非表示に Activity コンポーネントを使用する
• rendering-conditional-render - 条件付きに && ではなく三項演算子を使用する

7. JavaScript パフォーマンス（LOW-MEDIUM）

• js-batch-dom-css - クラスまたは cssText 経由で CSS 変更をグループ化する
• js-index-maps - 繰り返される検索に Map を作成する
• js-cache-property-access - ループ内でオブジェクトプロパティをキャッシュする
• js-cache-function-results - モジュールレベルの Map で関数結果をキャッシュする
• js-cache-storage - localStorage/sessionStorage 読み込みをキャッシュする
• js-combine-iterations - 複数の filter/map を 1 つのループに統合する
• js-length-check-first - 負荷の高い比較の前に配列長をチェックする
• js-early-exit - 関数から早期に return する
• js-hoist-regexp - ループ外に RegExp 作成を ホイストする
• js-min-max-loop - ソートの代わりに min/max にループを使用する
• js-set-map-lookups - O(1) 検索に Set/Map を使用する
• js-tosorted-immutable - 不変性に toSorted() を使用する

8. 高度なパターン（LOW）

• advanced-event-handler-refs - ref にイベントハンドラを保存する
• advanced-use-latest - 安定したコールバック ref に useLatest を使用する

使用方法

詳細な説明とコード例については、個別のルールファイルを参照してください：

rules/async-parallel.md
rules/bundle-barrel-imports.md
rules/_sections.md

各ルールファイルには以下が含まれます：

• それが重要な理由についての簡潔な説明
• 説明付きの不正なコード例
• 説明付きの正しいコード例
• 追加のコンテキストと参考資料

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

すべてのルールが展開された完全なガイドについては AGENTS.md を参照してください。

使用時期

このスキルは、概要で説明されるワークフローまたはアクションを実行するのに適用できます。

制限事項

• このスキルは、タスクが上記で説明されるスコープと明らかに一致する場合にのみ使用してください。
• 出力を環境固有の検証、テスト、または専門家によるレビューの代替品として扱わないでください。
• 必要な入力、権限、安全境界、または成功基準が欠落している場合は、停止して明確化を求めてください。