Vercel React Best Practices

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

適用する時機

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

• 新しい 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-cheap-condition-before-await - フラグまたはリモート値を待機する前に安価な同期条件をチェックする
• 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-analyzable-paths - 静的に解析可能なインポートとファイルシステムパスを使用して、広いバンドルとトレースを避ける
• bundle-dynamic-imports - 重いコンポーネント向けに next/dynamic を使用する
• bundle-defer-third-party - ハイドレーション後に分析/ロギングを読み込む
• bundle-conditional - 機能が有効化されたときのみモジュールを読み込む
• bundle-preload - ホバー/フォーカスで プリロード して体感速度を向上させる

3. サーバーサイド パフォーマンス(HIGH)

• server-auth-actions - API ルートと同様にサーバー アクション を認証する
• server-cache-react - リクエストごとの重複排除に React.cache() を使用する
• server-cache-lru - クロスリクエスト キャッシング に LRU キャッシュを使用する
• server-dedup-props - RSC プロップでの重複シリアライゼーション を避ける
• server-hoist-static-io - 静的 I/O(フォント、ロゴ)をモジュールレベルに持ち上げる
• server-no-shared-module-state - RSC/SSR でモジュールレベルの変更可能なリクエスト状態を避ける
• server-serialization - クライアント コンポーネント に渡すデータを最小化する
• server-parallel-fetching - コンポーネントを再構成してフェッチを並列化する
• server-parallel-nested-fetching - Promise.all の各アイテムごとにネストされたフェッチをチェーンする
• server-after-nonblocking - ノンブロッキング操作に after() を使用する

4. クライアントサイド データフェッチング(MEDIUM-HIGH)

• client-swr-dedup - 自動リクエスト重複排除に SWR を使用する
• client-event-listeners - グローバル イベント リスナー を重複排除する
• client-passive-event-listeners - スクロール向けにパッシブ リスナー を使用する
• client-localstorage-schema - localStorage データをバージョン管理および最小化する

5. 再レンダリング最適化(MEDIUM)

• rerender-defer-reads - コールバックでのみ使用される状態をサブスクライブしない
• rerender-memo - 高価な処理をメモ化された コンポーネント に抽出する
• rerender-memo-with-default-value - デフォルトの非プリミティブ プロップ を持ち上げる
• rerender-dependencies - エフェクトでプリミティブ依存関係を使用する
• rerender-derived-state - 生の値ではなく派生ブール値をサブスクライブする
• rerender-derived-state-no-effect - エフェクトではなくレンダリング時に状態を派生させる
• rerender-functional-setstate - 安定したコールバック向けに関数型 setState を使用する
• rerender-lazy-state-init - 高価な値向けに useState に関数を渡す
• rerender-simple-expression-in-memo - シンプルなプリミティブ向けに memo を避ける
• rerender-split-combined-hooks - 独立した依存関係を持つ フック を分割する
• rerender-move-effect-to-event - インタラクション ロジック をイベント ハンドラ に置く
• rerender-transitions - 緊急度の低い更新に startTransition を使用する
• rerender-use-deferred-value - 入力をレスポンシブに保つために高価なレンダリングを遅延させる
• rerender-use-ref-transient-values - 一時的で頻繁に変わる値に refs を使用する
• rerender-no-inline-components - コンポーネント内でコンポーネントを定義しない

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 - クライアント専用データに インライン スクリプト を使用する
• rendering-hydration-suppress-warning - 予期されたミスマッチを抑制する
• rendering-activity - 表示/非表示に Activity コンポーネント を使用する
• rendering-conditional-render - 条件分岐に && ではなく三項演算子を使用する
• rendering-usetransition-loading - ローディング状態に useTransition を優先する
• rendering-resource-hints - プリロード向けに React DOM リソース ヒント を使用する
• rendering-script-defer-async - スクリプト タグ に defer または async を使用する

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 - 関数から早期に戻る
• js-hoist-regexp - ループ外に RegExp 作成を持ち上げる
• js-min-max-loop - ソートの代わりに min/max ループを使用する
• js-set-map-lookups - O(1) ルックアップ向けに Set/Map を使用する
• js-tosorted-immutable - イミュータビリティ向けに toSorted() を使用する
• js-flatmap-filter - 1 パスで map とフィルター を行うために flatMap を使用する
• js-request-idle-callback - ブラウザアイドル時間に重要でない処理を遅延させる

8. アドバンスパターン(LOW)

• advanced-effect-event-deps - useEffectEvent の結果をエフェクト依存関係に入れない
• advanced-event-handler-refs - イベント ハンドラ を refs に保存する
• advanced-init-once - アプリ読み込みごとに 1 回だけ初期化する
• advanced-use-latest - 安定したコールバック refs に useLatest を使用する

使用方法

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

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

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

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

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

すべてのルールを展開した完全なガイドについては: AGENTS.md