1月15日、Vercel Newsで「Reactのベストプラクティスの紹介(Introducing: React Best Practices)」と題した記事が公開された。この記事では、AIエージェントやLLM（大規模言語モデル）向けに最適化された、ReactおよびNext.jsのパフォーマンス最適化に関する構造化リポジトリの導入について詳しく紹介されている。
以下に、その内容を簡潔にまとめて紹介する。
Vercelは、10年以上にわたるReactとNext.jsの最適化に関する知見を凝縮したreact-best-practicesを公開した。これは、開発者がパフォーマンスの問題を事後的に追いかける「リアクティブ（反応的）」な対応から脱却し、より効率的に問題を特定・修正するためのフレームワークである。
パフォーマンス改善の優先順位
本フレームワークの核となる考え方は、改善の「順序」だ。スタックの下層にある細かなマイクロ最適化よりも、全体に大きな影響を与える上位の課題から着手することを推奨している。具体的には、以下の優先順位で最適化を行う。
- ウォーターフォールの排除: ネットワークリクエストの不必要な直列実行を避ける。
- バンドルサイズの削減: クライアントに送信するJavaScriptの量を減らす。
- サーバーサイドパフォーマンス、クライアントサイドのデータ取得、再レンダリングの最適化: これらを段階的に進める。
8つの主要カテゴリー
本リポジトリには、影響度（CRITICALからLOWまで）に基づいて分類された40以上のルールが含まれており、以下の8つのカテゴリーをカバーしている。
- 非同期ウォーターフォールの排除
- バンドルサイズの最適化
- サーバーサイドのパフォーマンス
- クライアントサイドのデータ取得
- 再レンダリングの最適化
- レンダリングパフォーマンス
- JavaScriptのパフォーマンス
各ルールには、問題のあるコード例と修正後のコード例が示されている。例えば、不要な待ち時間を発生させる非同期処理の不適切なパターンと、その修正方法は以下の通りである。
不適切な例（不要なブランチでも待ち時間が発生する）：
async function handleRequest(userId: string, skipProcessing: boolean) {
const userData = await fetchUserData(userId)
if (skipProcessing) {
// すでにuserDataを待機してしまっているため、即座に返せない
return { skipped: true }
}
return processUserData(userData)
}
適切な例（必要な場合のみ待機する）：
async function handleRequest(userId: string, skipProcessing: boolean) {
if (skipProcessing) {
return { skipped: true }
}
const userData = await fetchUserData(userId)
return processUserData(userData)
}
実践から得られた知見
これらのプラクティスは理論的なものではなく、実際のプロダクション環境での修正事例に基づいている。
- ループ処理の統合: チャット画面でメッセージリストを8回スキャンしていた処理を1回に統合。
- awaitの並列化: 依存関係のないデータベースコールを同時に実行し、待ち時間を半減。
- フォントフォールバックの調整: カスタムフォント読み込み前の表示崩れを文字間隔の調整で改善。
AIエージェントへの統合
これらのルールはAGENTS.mdという単一のドキュメントにコンパイルされており、AIエージェントがコードレビューやリファクタリングの際に参照できるよう設計されている。Opencode、Claude Code、Cursorなどのコーディングエージェントに「Agent Skills」としてインストールすることが可能だ。
インストールコマンド:
npx add-skill vercel-labs/agent-skills
詳細は[Introducing: React Best Practices]を参照していただきたい。
