あなたはまだuseMemoでパフォーマンスの最適化を始めますか? Vercelが10年以上積み重ねてきたReact/Next.js最適化秘密をreact-best-practicesという名前でオープンソース公開しました。それもAIエージェントがすぐに活用できる形です。 --- ##コアインサイト:「最適化の順序はすべてです」 ほとんどのパフォーマンス最適化が失敗する理由低すぎるところから始まるからです。 - 600msリクエストウォーターポールがありますがuseMemo最適化?意味なし - ページごとに300KBバンドルが追加されますが、ループ最適化?時間の無駄 Vercelが提示する優先順位: 1. ウォーターフォール除去(CRITICAL) 2. 2. バンドルサイズの縮小 (CRITICAL) 3. 3. サーバーサイド性能 4. 4. クライアントデータフェッチ 5. 5. リレンダリングの最適化 --- ##実際のケースは衝撃的です ケース1:ループ統合 - チャットページで同じメッセージリストを8回もスキャンしていた - > 1回に統合 ケース 2
あなたはまだuseMemoでパフォーマンスの最適化を始めますか? Vercelが10年以上積み重ねてきたReact/Next.js最適化秘密をreact-best-practicesという名前でオープンソース公開しました。それもAIエージェントがすぐに活用できる形です。 --- ##コアインサイト:「最適化の順序はすべてです」 ほとんどのパフォーマンス最適化が失敗する理由低すぎるところから始まるからです。 - 600msリクエストウォーターポールがありますがuseMemo最適化?意味なし - ページごとに300KBバンドルが追加されますが、ループ最適化?時間の無駄 Vercelが提示する優先順位: 1. ウォーターフォール除去(CRITICAL) 2. 2. バンドルサイズの縮小 (CRITICAL) 3. 3. サーバーサイド性能 4. 4. クライアントデータフェッチ 5. 5. リレンダリングの最適化 --- ##実際のケースは衝撃的です ケース1:ループ統合 - チャットページで同じメッセージリストを8回もスキャンしていた - > 1回に統合 ケース 2