vercel-react-best-practices

Vercel React ベストプラクティス

適用するタイミング

• 適用対象：React または Next.js の開発、コンポーネントの作成、データ取得のパターン、バンドルの最適化
• 適用しない場合：プロジェクトで React または Next.js を使用していない場合

Vercel が管理する、React および Next.js アプリケーション向けの包括的なパフォーマンス最適化ガイドです。8 つのカテゴリにわたる 47 のルールを含み、影響度の高い順に並べて、自動リファクタリングとコード生成を支援します。

適用するタイミング

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

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

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

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

クイックリファレンス

1. ウォーターフォールの排除（致命的）

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

2. バンドルサイズの最適化（致命的）

• bundle-barrel-imports - 直接インポートし、バレルファイルを避ける
• bundle-dynamic-imports - 重いコンポーネントには next/dynamic を使用する
• bundle-defer-third-party - ハイドレーション後に分析／ログ記録を読み込む
• bundle-conditional - 機能が有効になったときだけモジュールを読み込む
• bundle-preload - 体感速度を高めるため、ホバー／フォーカス時にプリロードする

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

• server-cache-react - リクエストごとの重複排除に React.cache() を使用する
• server-cache-lru - リクエストをまたいだキャッシュには LRU キャッシュを使用する
• server-serialization - クライアントコンポーネントに渡すデータを最小限にする
• server-parallel-fetching - コンポーネントを再構成して、取得処理を並列化する
• server-after-nonblocking - ノンブロッキング処理には after() を使用する

4. クライアントサイドのデータ取得（中〜高）

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

5. 再レンダリングの最適化（中）

• rerender-defer-reads - コールバック内でのみ使用する状態を購読しない
• rerender-memo - コストの高い処理をメモ化したコンポーネントに切り出す
• rerender-dependencies - エフェクトではプリミティブ型の依存値を使用する
• rerender-derived-state - 生の値ではなく、派生した真偽値を購読する
• rerender-functional-setstate - 安定したコールバックには関数形式の setState を使用する
• rerender-lazy-state-init - コストの高い値には useState に関数を渡す
• rerender-transitions - 緊急性の低い更新には startTransition を使用する

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

• rendering-animate-svg-wrapper - SVG 要素ではなく、ラッパーの div をアニメーション化する
• rendering-content-visibility - 長いリストには content-visibility を使用する
• rendering-hoist-jsx - 静的な JSX をコンポーネントの外に切り出す
• rendering-svg-precision - SVG 座標の精度を下げる
• rendering-hydration-no-flicker - クライアント専用データにはインラインスクリプトを使用する
• rendering-activity - 表示／非表示の切り替えには Activity コンポーネントを使用する
• rendering-conditional-render - 条件分岐には && ではなく三項演算子を使用する

7. JavaScript パフォーマンス (低～中)

• 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 には sort ではなくループを使用する
• js-set-map-lookups - O(1) の検索には Set/Map を使用する
• js-tosorted-immutable - イミュータビリティのために toSorted() を使用する

8. 高度なパターン (低)

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

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

すべてのルールを展開し、詳細なコード例を掲載した完全なガイドについては、AGENTS.md を参照してください。

各ルールには次の内容が含まれます:

• なぜ重要かについての簡単な説明
• 説明付きの誤ったコード例
• 説明付きの正しいコード例
• 追加のコンテキストと参考情報