vercel-react-best-practices

Vercel React ベストプラクティス

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

適用すべき場面

次のような場合にこれらのガイドラインを参照してください:

• 新しい 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 ルートではプロミスを早く開始し、遅く 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-auth-actions - API ルートと同様にサーバーアクションを認証する
• server-cache-react - リクエストごとの重複排除に React.cache() を使用する
• server-cache-lru - リクエスト間のキャッシュに LRU キャッシュを使用する
• server-dedup-props - RSC プロパティでの重複シリアライズを避ける
• server-hoist-static-io - 静的な I/O（フォント、ロゴ）をモジュールレベルに巻き上げる
• server-serialization - クライアントコンポーネントに渡すデータを最小限にする
• server-parallel-fetching - コンポーネントを再構成してフェッチを並列化する
• 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 - コールバックでのみ使用される state を購読しない
• rerender-memo - コストの高い処理をメモ化されたコンポーネントに抽出する
• rerender-memo-with-default-value - デフォルトの非プリミティブなプロパティを巻き上げる
• rerender-dependencies - 副作用ではプリミティブな依存関係を使用する
• rerender-derived-state - 生の値ではなく派生した真偽値を購読する
• rerender-derived-state-no-effect - 副作用ではなくレンダリング中に state を導出する
• rerender-functional-setstate - 安定したコールバックのために関数型 setState を使用する
• rerender-lazy-state-init - コストの高い値には useState に関数を渡す
• rerender-simple-expression-in-memo - 単純なプリミティブには memo を避ける
• rerender-move-effect-to-event - インタラクションロジックをイベントハンドラーに配置する
• rerender-transitions - 緊急でない更新には startTransition を使用する
• 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 - script タグに 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 には sort ではなくループを使用する
• js-set-map-lookups - O(1) の検索には Set/Map を使用する
• js-tosorted-immutable - イミュータビリティには toSorted() を使用する
• js-flatmap-filter - map と filter を 1 回の処理で行うには flatMap を使用する

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

• 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