vercel-react-best-practices

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 - フラグやリモートの値を await する前に、負荷の小さい同期条件を確認する
• 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-analyzable-paths - 静的に解析可能なインポートおよびファイルシステムのパスを優先し、広範囲にわたるバンドルやトレースを避ける
• bundle-dynamic-imports - 重いコンポーネントには next/dynamic を使用する
• bundle-defer-third-party - ハイドレーション後にアナリティクスやロギングを読み込む
• bundle-conditional - 機能が有効化されたときにのみモジュールを読み込む
• bundle-preload - 体感速度を高めるため、ホバーやフォーカス時にプリロードする

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

• server-auth-actions - API ルートと同様に Server Actions の認証を行う
• 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. 再レンダーの最適化（中）

• rerender-defer-reads - コールバック内でのみ使用する状態を購読しない
• rerender-memo - コストの高い処理をメモ化されたコンポーネントに切り出す
• rerender-memo-with-default-value - プリミティブ以外のデフォルトの props をコンポーネントの外に移動する
• rerender-dependencies - エフェクトではプリミティブな依存値を使用する
• rerender-derived-state - 生の値ではなく、派生した真偽値を購読する
• rerender-derived-state-no-effect - エフェクトではなく、レンダー中に状態を導出する
• rerender-functional-setstate - 安定したコールバックには関数形式の setState を使用する
• rerender-lazy-state-init - コストの高い値には関数を useState に渡す
• rerender-simple-expression-in-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. レンダリングのパフォーマンス（中）

• 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 のパフォーマンス（低～中）

• 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 - 最小値／最大値の取得には sort ではなくループを使用する
• js-set-map-lookups - O(1) の検索には Set／Map を使用する
• js-tosorted-immutable - 不変性を保つために toSorted() を使用する
• js-flatmap-filter - 1回の処理で map と filter を行うには flatMap を使用する
• js-request-idle-callback - 重要度の低い処理をブラウザーのアイドル時間まで遅延させる

8. 高度なパターン（低）

• advanced-effect-event-deps - useEffectEvent の結果をエフェクトの依存配列に含めない
• advanced-event-handler-refs - イベントハンドラーを ref に保存する
• advanced-init-once - アプリの読み込みごとにアプリを1回だけ初期化する
• advanced-use-latest - 最新の値を使うコールバックには useEffectEvent を使用する

使用方法

上記のルールのうち、タスクに該当する各ルールについて rules/<rule-id>.md を読み、その重要性と、誤ったコードおよび正しいコードを確認してください。