react-best-practices

Next.js & React パフォーマンスエキスパート

Vercel Engineering による — 影響度順に優先順位付けされた 57 の最適化ルール 方針： まずウォーターフォールをなくし、次にバンドルを最適化し、その後に細かな最適化を行います。

---

🎯 選択的に読むルール（必須）

タスクに関連するセクションだけを読んでください！ 以下のコンテンツマップを確認し、必要なものを読み込んでください。

🔴 パフォーマンスレビューでは、まず CRITICAL セクション（1〜2）から始め、その後 HIGH／MEDIUM に進んでください。

---

📑 コンテンツマップ

ファイル	影響度	ルール数	読むタイミング
1-async-eliminating-waterfalls.md	🔴 CRITICAL	5 ルール	ページの読み込みが遅い場合、API 呼び出しが逐次的な場合、データ取得にウォーターフォールが発生している場合
2-bundle-bundle-size-optimization.md	🔴 CRITICAL	5 ルール	バンドルサイズが大きい場合、Time to Interactive が遅い場合、First Load に問題がある場合
3-server-server-side-performance.md	🟠 HIGH	7 ルール	SSR が遅い場合、API ルートの最適化、サーバーサイドでウォーターフォールが発生している場合
4-client-client-side-data-fetching.md	🟡 MEDIUM-HIGH	4 ルール	クライアント側のデータ管理、SWR パターン、重複排除
5-rerender-re-render-optimization.md	🟡 MEDIUM	12 ルール	再レンダリングが過剰な場合、React のパフォーマンス、メモ化
6-rendering-rendering-performance.md	🟡 MEDIUM	9 ルール	レンダリングのボトルネック、仮想化、画像の最適化
7-js-javascript-performance.md	⚪ LOW-MEDIUM	12 ルール	細かな最適化、キャッシュ、ループのパフォーマンス
8-advanced-advanced-patterns.md	🔵 VARIABLE	3 ルール	高度な React パターン、useLatest、一度だけの初期化
9-cache-components.md	🔴 CRITICAL	4 セクション	Next.js 16 以降のみ：use cache、cacheLife、PPR、cacheTag

合計：8 カテゴリにわたる 57 のルール

---

🚀 クイック判断ツリー

どのようなパフォーマンスの問題ですか？

🐌 Slow page loads / Long Time to Interactive
  → Read Section 1: Eliminating Waterfalls
  → Read Section 2: Bundle Size Optimization

📦 Large bundle size (> 200KB)
  → Read Section 2: Bundle Size Optimization
  → Check: Dynamic imports, barrel imports, tree-shaking

🖥️ Slow Server-Side Rendering
  → Read Section 3: Server-Side Performance
  → Check: Parallel data fetching, streaming

🔄 Too many re-renders / UI lag
  → Read Section 5: Re-render Optimization
  → Check: React.memo, useMemo, useCallback

🎨 Rendering performance issues
  → Read Section 6: Rendering Performance
  → Check: Virtualization, layout thrashing

🌐 Client-side data fetching problems
  → Read Section 4: Client-Side Data Fetching
  → Check: SWR deduplication, localStorage

✨ Need advanced patterns
  → Read Section 8: Advanced Patterns

🚀 **Next.js 16+ Performance (Caching & PPR)**
  → Read Section 9: Cache Components

---

📊 影響度の優先順位ガイド

包括的な最適化を行う際は、次の順序で進めてください：

1️⃣ CRITICAL (Biggest Gains - Do First):
   ├─ Section 1: Eliminating Waterfalls
   │  └─ Each waterfall adds full network latency (100-500ms+)
   └─ Section 2: Bundle Size Optimization
      └─ Affects Time to Interactive and Largest Contentful Paint

2️⃣ HIGH (Significant Impact - Do Second):
   └─ Section 3: Server-Side Performance
      └─ Eliminates server-side waterfalls, faster response times

3️⃣ MEDIUM (Moderate Gains - Do Third):
   ├─ Section 4: Client-Side Data Fetching
   ├─ Section 5: Re-render Optimization
   └─ Section 6: Rendering Performance

4️⃣ LOW (Polish - Do Last):
   ├─ Section 7: JavaScript Performance
   └─ Section 8: Advanced Patterns

🔥 **MODERN (Next.js 16+):**
   └─ Section 9: Cache Components (Replaces most traditional revalidation)

---

🔗 関連スキル

必要なもの	スキル
API 設計パターン	@[skills/api-patterns]
データベースの最適化	@[skills/database-design]
テスト戦略	@[skills/testing-patterns]
UI／UX 設計の原則	@[skills/frontend-design]
TypeScript パターン	@[skills/typescript-expert]
デプロイと DevOps	@[skills/deployment-procedures]

---

✅ パフォーマンスレビューチェックリスト

本番環境へリリースする前に：

最重要（必ず修正）：

• データ取得が逐次的でない（ウォーターフォールを解消済み）
• メインバンドルのサイズが 200KB 未満
• アプリのコードでバレルインポートを使用していない
• 大きなコンポーネントで動的インポートを使用している
• 可能な場合はデータを並列取得している

優先度：高

• 適切な箇所でサーバーコンポーネントを使用している
• API ルートを最適化している（N+1 クエリがない）
• データ取得に Suspense 境界を設けている
• 可能な箇所で静的生成を使用している

優先度：中

• コストの高い計算をメモ化している
• リストのレンダリングを仮想化している（100 項目を超える場合）
• next/image で画像を最適化している
• 不要な再レンダリングがない

優先度：低（仕上げ）：

• ホットパスのループを最適化している
• RegExp パターンをループの外に移動している
• ループ内のプロパティアクセスをキャッシュしている

---

❌ アンチパターン（よくある間違い）

避けること：

• ❌ 独立した操作に逐次的な await を使う
• ❌ 1つの関数だけが必要なのに、ライブラリ全体をインポートする
• ❌ アプリケーションコードでバレルエクスポート（index.ts による再エクスポート）を使う
• ❌ 大きなコンポーネントやライブラリに動的インポートを使わない
• ❌ 重複排除せずに useEffect でデータを取得する
• ❌ コストの高い計算のメモ化を忘れる
• ❌ サーバーコンポーネントで対応できる場面でクライアントコンポーネントを使う

実践すること：

• ✅ Promise.all() を使ってデータを並列取得する
• ✅ 動的インポートを使う：const Comp = dynamic(() => import('./Heavy'))
• ✅ 直接インポートする：import { specific } from 'library/specific'
• ✅ UX の向上に Suspense 境界を使う
• ✅ React Server Components を活用する
• ✅ 最適化の前にパフォーマンスを測定する
• ✅ Next.js 組み込みの最適化（next/image、next/font）を使う

---

🎯 このスキルの使い方

新機能を開発するとき：

1. 開発中にセクション 1 と 2を確認します（ウォーターフォールを防ぎ、バンドルサイズを小さく保つ）
2. デフォルトでサーバーコンポーネントを使います（セクション 3）
3. コストの高い処理にメモ化を適用します（セクション 5）

パフォーマンスレビューを行うとき：

1. セクション 1から始めます（ウォーターフォールの影響が最も大きい）
2. 次にセクション 2を確認します（バンドルサイズ）
3. 次にセクション 3を確認します（サーバーサイド）
4. 最後に、必要に応じてほかのセクションを確認します

パフォーマンスの低下をデバッグするとき：

1. 症状（読み込みの遅さ、遅延など）を特定します
2. 上記のクイック判断ツリーを使います
3. 該当するセクションを読みます
4. 優先度順に修正を適用します

---

📚 学習の進め方

初級（重要項目に注力）： → セクション 1：ウォーターフォールの解消 → セクション 2：バンドルサイズの最適化

中級（優先度の高い項目を追加）： → セクション 3：サーバーサイドのパフォーマンス → セクション 5：再レンダリングの最適化

上級（全体を最適化）： → すべてのセクション + セクション 8：高度なパターン

---

🔍 検証スクリプト

スクリプト	目的	コマンド
scripts/react_performance_checker.py	自動パフォーマンス監査	python scripts/react_performance_checker.py <project_path>

---

📖 各セクションの詳細

セクション 1：ウォーターフォールの解消（重大）

影響： ウォーターフォールが1つ増えるごとに、レイテンシが100～500ms以上増加します 主な概念： 並列取得、Promise.all()、Suspense 境界、先行読み込み

セクション 2：バンドルサイズの最適化（重大）

影響： インタラクティブになるまでの時間と最大コンテンツ描画に直接影響します 主な概念： 動的インポート、ツリーシェイキング、バレルインポートの回避

セクション 3：サーバーサイドのパフォーマンス（高）

影響： サーバー応答の高速化、SEO の向上 主な概念： サーバーでの並列取得、ストリーミング、API ルートの最適化

セクション 4：クライアントサイドのデータ取得（中～高）

影響： 重複リクエストの削減、UX の向上 主な概念： SWR による重複排除、localStorage キャッシュ、イベントリスナー

セクション 5：再レンダリングの最適化（中）

影響： UI の滑らかな動作、無駄な計算の削減 主な概念： React.memo、useMemo、useCallback、コンポーネント構造

セクション 6：レンダリングパフォーマンス（中）

影響： レンダリング効率の向上 主な概念： 仮想化、画像の最適化、レイアウトスラッシング

セクション 7：JavaScript パフォーマンス（低～中）

影響： ホットパスの段階的な改善 主な概念： ループの最適化、キャッシュ、RegExp の巻き上げ

セクション 8：高度なパターン（変動）

影響： 特定のユースケース 主な概念： useLatest フック、一度だけ初期化するパターン、イベントハンドラーの参照

---

🎓 ベストプラクティスのまとめ

基本原則：

1. まず測定する - React DevTools Profiler、Chrome DevToolsを使用します
2. 影響の大きいものから対処する - ウォーターフォール → バンドル → サーバー → 微調整
3. 過剰な最適化は避ける - 実際のボトルネックに焦点を当てます
4. プラットフォームの機能を活用する - Next.jsには最適化機能が組み込まれています
5. ユーザーのことを考える - 実環境の状況が重要です

パフォーマンスを意識する：

• 連続する各 await は、ウォーターフォールになる可能性があります
• 各 import は、バンドルが肥大化する可能性があります
• 再レンダリングのたびに、（不要な場合は）計算が無駄になります
• サーバーコンポーネントを使うと、配信するJavaScriptが少なくなります
• 推測せず、測定します

---

出典： Vercel Engineering 日付： 2026年1月 バージョン： 1.0.0 ルールの合計： 8カテゴリにわたる57項目