これは何の話？

React・Next.jsでアプリケーションを開発しているチーム向けの実践ガイドです。Vercelが10年以上にわたるReact最適化の知見を「react-best-practices」というリポジトリにまとめて公開しました。AIエージェントやLLMが参照しやすいように構造化されており、Opencode、Codex、Claude Code、Cursorなどのコーディングエージェントにインストールできます。

何がわかったか

リポジトリには8つのパフォーマンスカテゴリがあります。非同期ウォーターフォールの排除、バンドルサイズ最適化、サーバーサイドパフォーマンス、クライアントサイドデータ取得、再レンダリング最適化、レンダリングパフォーマンス、上級パターン、JavaScript性能です。各ルールはCRITICAL、HIGH、MEDIUM、LOWの4段階で影響度が評価されており、優先順位をつけて対処できます。

他とどう違うのか

従来のパフォーマンスガイドは網羅的だが優先順位が不明確なことが多くありました。このリポジトリはウォーターフォール排除とバンドルサイズ削減をCRITICALとして最優先に設定しています。useMemoの最適化より先にリクエストの直列化を解消すべきという明確な順序付けがされています。また、個別ルールファイルがAGENTS.mdに統合されるため、AIエージェントが一貫したアドバイスを提供できます。

なぜこれが重要か

パフォーマンス改善は「何を最初にやるか」で成果が大きく変わります。600msのウォーターフォールを解消すれば、ループ内の数マイクロ秒を削っても意味がありません。このフレームワークにより、チームが同じ判断基準でリファクタリングを進められるようになります。特にAIエージェントを活用した大規模リファクタリングで威力を発揮します。

未来の展開・戦略性

Vercel Labsが公開するagent-skillsの一部として提供されており、npx add-skill vercel-labs/agent-skillsでインストールできます。今後、React以外のフレームワーク（Vue、Svelte等）向けのベストプラクティスも同様の形式で公開される可能性があります。AIエージェント向けに構造化された知識ベースは、ソフトウェア開発の標準的な成果物になるかもしれません。

どう考え、どう動くか

たとえば、既存のReactプロジェクトでパフォーマンス改善を行う際、まずCRITICALカテゴリから着手すると効率的です。

  • まずreact-best-practicesリポジトリをクローンし、ルール一覧を確認する
  • 自社プロジェクトでウォーターフォールが発生している箇所を洗い出す
  • 使用しているコーディングエージェントにSkillsとしてインストールする

次の一歩：

  • 今日やること：リポジトリのREADMEとウォーターフォール関連ルールを読む
  • 今週やること：1つのページで非同期処理を並列化し、効果を計測する

限界と未確定

  • ルールは本番コードベースでの経験に基づいていますが、すべてのプロジェクトに適用できるわけではありません。自社の状況に応じた判断が必要です。
  • AIエージェントへの組み込み方法は各ツールで異なります。ドキュメントを確認する必要があります。

用語ミニ解説

直列の待ち時間（ウォーターフォール / waterfall）：前のリクエストが完了するまで次のリクエストを開始しない状態。待ち時間が積み重なり全体が遅くなる。以後は「直列待ち」と呼びます。

出典と日付

Vercel Blog（公開日：2026-01-16）：https://vercel.com/blog/introducing-react-best-practices