nextjs-react-expert

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

Vercel Engineering 提供 — 影響度順に優先順位付けされた58の最適化ルールと、Next.js 16 の Cache Components 基本方針： まずウォーターフォールをなくし、次にバンドルを最適化し、その後に細かな最適化を行います。

---

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

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

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

---

📑 コンテンツマップ

ファイル	影響度	ルール	読むタイミング
1-async-eliminating-waterfalls.md	🔴 CRITICAL	6ルール	ページの読み込みが遅い場合、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、init-once を扱う場合
9-cache-components.md	🔴 CRITICAL	4セクション	Next.js 16+ のみ：use cache、cacheLife、PPR、cacheTag

合計：8カテゴリにわたる58のルールと、Next.js 16+ 向けのセクション9（Cache Components）

---

🚀 クイック判断ツリー

どのようなパフォーマンスの問題がありますか？

🐌 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（Next.js 16 / React 19時代） ルールの総数： 8カテゴリにわたる58項目に加え、セクション9（Cache Components）