Vercel React Best Practices

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

適用する場合

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

• 新しい 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 - await の前に低コストの同期条件をチェック
• async-defer-await - await を実際に使用されているブランチに移動
• async-parallel - 独立した操作に Promise.all() を使用
• async-dependencies - 部分的な依存関係に better-all を使用
• async-api-routes - API ルート内で early に Promise を開始し、late に await
• async-suspense-boundaries - Suspense を使用してコンテンツをストリーミング

2. バンドルサイズ最適化(CRITICAL)

• bundle-barrel-imports - barrel ファイルを避け、直接インポート
• 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 - 入力の応答性を保つために高コストなレンダーを defer
• rerender-use-ref-transient-values - 頻繁に変化する一時的な値に ref を使用
• 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 - 関数から早期に return
• 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 - map と filter を1つのパスで実行するために flatMap を使用
• js-request-idle-callback - 非クリティカルな処理をブラウザのアイドル時に defer

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

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

使用方法

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

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

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

• 重要である理由の簡潔な説明
• 説明付きの不正なコード例
• 説明付きの正しいコード例
• 追加のコンテキストと参考資料

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

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