vercel-react-best-practices

Vercel React のベストプラクティス

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 - フラグやリモート値を待つ前に、コストの低い同期条件を確認する
• async-defer-await - 実際に使用する分岐内に await を移動する
• async-parallel - 独立した処理には Promise.all() を使用する
• async-dependencies - 部分的な依存関係には better-all を使用する
• async-api-routes - API ルートでは Promise を早く開始し、待機を遅らせる
• 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 の props で重複したシリアライズを避ける
• 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 - プリミティブ以外のデフォルト prop をホイストする
• 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 - 頻繁に変化する一時的な値には 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 を求める
• js-set-map-lookups - O(1) の検索には Set/Map を使用する
• js-tosorted-immutable - 不変性のために toSorted() を使用する
• js-flatmap-filter - flatMap を使って1回のパスで map と filter を行う
• js-request-idle-callback - 重要度の低い処理はブラウザのアイドル時間に遅らせる

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

• advanced-effect-event-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 にあります。