- Vercelが、ReactとNext.jsにおける10年以上のパフォーマンス最適化経験をもとにした構造化リポジトリ
React-Best-Practices を公開
- このリポジトリは、AIエージェントとLLM がコードレビューやリファクタリング時に一貫した最適化判断を行えるよう設計されている
- 中核は、ウォーターフォール排除とバンドルサイズ削減を優先順位の最上位に置き、サーバー・クライアント・レンダリング性能まで含む8カテゴリで構成
- 各ルールには、重要度ランク（CRITICAL～LOW） とともに、誤ったコード例と修正例が含まれる
- 実際の本番環境の事例で検証されたルールであり、コーディングエージェント統合による自動最適化支援が可能
React Best Practices 概要
react-best-practices は、ReactとNext.jsで10年以上にわたり蓄積された最適化知見を集約したリポジトリ
- AIエージェントやLLMがコード分析や改善提案を行う際に参照できるよう構造化されている
- Reactの性能問題は、しばしばリリース後に遅くなった症状へ対処する形で表面化する
- 非同期処理の逐次実行、肥大化するクライアントバンドル、不必要な再レンダリングが主な原因として挙げられている
- こうした問題は、すべてのユーザーセッションに繰り返しコストを発生させる構造的ボトルネックとして作用する
中核アイデア：優先順位ベースの最適化
- 多くの性能改善の試みは、スタックの下位レイヤーから始めて失敗しがち
- たとえば、リクエストのウォーターフォールが600ms追加するなら、
useMemo の最適化には意味がない
- ページごとに300KBの不要なJavaScriptを送っているなら、細かなループ最適化は効果がない
- フレームワークは、2つの中核施策から始まる
- ウォーターフォールの排除
- バンドルサイズの削減
- その後、サーバー性能、クライアントデータフェッチ、再レンダリング最適化の順に拡張される
- 合計8カテゴリ、40以上のルールが重要度順に並んでいる
- CRITICAL段階はウォーターフォール排除とバンドル削減、LOW段階は高度なパターン
含まれる主なカテゴリ
- リポジトリは次の8つの性能領域を扱う
- 非同期ウォーターフォールの排除
- バンドルサイズ最適化
- サーバー性能
- クライアントデータフェッチ
- 再レンダリング最適化
- レンダリング性能
- 高度なパターン
- JavaScript性能
- 各ルールは、影響度ランク（CRITICAL～LOW） とともに、誤ったコードと修正版の例を提供
- 例: 不要な
await 呼び出しによって全分岐でデータ待ちになるコード → 条件分岐の順序を変え、必要なときだけ待機するよう修正
- すべてのルールファイルは
AGENTS.md にコンパイルされ、AIエージェントがコードレビュー時に直接参照可能
実例ベースのルール収集
- すべてのルールは、実際の本番コードベースでの性能改善経験に基づいている
- ループ統合: メッセージリストを8回走査していたコードを1回に減らし、大規模データ処理の効率を向上
- 非同期並列化: 依存関係のないDB呼び出しを並列実行し、全体待機時間を半分に短縮
- フォントフォールバック調整: システムフォント使用時に字間を調整し、フォールバック状態でも自然な表示を維持
コーディングエージェント統合
react-best-practices は、Agent Skillsパッケージとして提供され、さまざまなコーディングエージェントにインストール可能
- Opencode、Codex、Claude Code、Cursor などで利用できる
- エージェントがネストした
useEffect 呼び出しや重いクライアントインポートを検出すると、該当ルールを参照して修正提案が可能
- インストールコマンド:
npx add-skill vercel-labs/agent-skills
- 完全なリポジトリはGitHubの
react-best-practices で確認できる
2件のコメント
https://ywc.life/posts/vercel-react-best-practice
全文を翻訳してみました
ありがとうございます！よく読ませていただきます。