- Vercel, React ve Next.js için 10 yılı aşkın performans optimizasyonu deneyimine dayanan yapılandırılmış
React-Best-Practices deposunu yayınladı
- Bu depo, AI ajanları ve LLM'lerin kod incelemesi veya refactoring sırasında tutarlı optimizasyon kararları verebilmesi için tasarlandı
- Temel yaklaşım, waterfall'ları ortadan kaldırma ve bundle boyutunu küçültmeyi önceliklendirmek; içerik sunucu, istemci ve render performansına kadar 8 kategoriden oluşuyor
- Her kural, önem derecesi (CRITICAL~LOW) ile birlikte hatalı kod örnekleri ve düzeltilmiş örnekler içeriyor
- Gerçek production örneklerinde doğrulanmış bu kurallar sayesinde, kodlama ajanı entegrasyonu üzerinden otomatik optimizasyon desteği sağlanabiliyor
React Best Practices genel bakış
react-best-practices, React ve Next.js için 10 yılı aşkın sürede birikmiş optimizasyon bilgisini bir araya getiren bir depo
- AI ajanları ve LLM'lerin kod analizi ve iyileştirme önerileri sırasında başvurabilmesi için yapılandırıldı
- React performans sorunları çoğu zaman yayın sonrası yavaşlama belirtilerine tepki olarak ortaya çıkıyor
- Asenkron işlerin sıralı çalıştırılması, büyüyen istemci bundle'ları ve gereksiz yeniden render'lar başlıca nedenler olarak gösteriliyor
- Bu sorunlar, her kullanıcı oturumunda tekrarlanan maliyet yaratan yapısal darboğazlar olarak işliyor
Temel fikir: öncelik tabanlı optimizasyon
- Performans iyileştirme girişimlerinin çoğu, stack'in alt seviyelerinden başlayıp başarısız oluyor
- Örneğin, istek waterfall'ı 600ms ekliyorsa
useMemo optimizasyonunun anlamı kalmıyor
- Her sayfada gereksiz 300KB JavaScript gönderiliyorsa ince döngü optimizasyonları etkili olmuyor
- Çerçeve, iki temel adımla başlıyor
- Waterfall'ları ortadan kaldırmak
- Bundle boyutunu küçültmek
- Ardından sunucu performansı, istemci veri çekme ve yeniden render optimizasyonu sırasıyla ele alınıyor
- Toplamda 8 kategori ve 40'tan fazla kural önem sırasına göre dizilmiş durumda
- CRITICAL seviyesi waterfall kaldırma ve bundle küçültmeye, LOW seviyesi ise ileri düzey desenlere ayrılıyor
Dahil edilen başlıca kategoriler
- Depo, şu 8 performans alanını kapsıyor
- Asenkron waterfall'ların kaldırılması
- Bundle boyutu optimizasyonu
- Sunucu performansı
- İstemci veri çekme
- Yeniden render optimizasyonu
- Render performansı
- İleri düzey desenler
- JavaScript performansı
- Her kural, etki derecesi (CRITICAL~LOW) ile birlikte hatalı kod ve düzeltilmiş örnekler sunuyor
- Örnek: Gereksiz
await çağrıları nedeniyle tüm dallarda veriyi bekleyen kod → koşul sırası değiştirilerek yalnızca gerektiğinde bekleyecek şekilde düzeltiliyor
- Tüm kural dosyaları
AGENTS.md içine derleniyor; böylece AI ajanları bunlara kod incelemesi sırasında doğrudan başvurabiliyor
Gerçek örneklere dayanan kural derlemesi
- Tüm kurallar, gerçek production kod tabanlarında edinilen performans iyileştirme deneyimlerine dayanıyor
- Döngü birleştirme: Mesaj listesini 8 kez tarayan kod tek taramaya indirilerek büyük veri işlemede verim artırıldı
- Asenkron paralelleştirme: Bağımlılığı olmayan DB çağrıları paralel çalıştırılarak toplam bekleme süresi yarıya indirildi
- Yazı tipi fallback ayarı: Sistem fontu kullanılırken harf aralığı ayarlanarak fallback durumunda da doğal görünüm korundu
Kodlama ajanı entegrasyonu
react-best-practices, Agent Skills paketi olarak sunuluyor ve farklı kodlama ajanlarına kurulabiliyor
- Opencode, Codex, Claude Code, Cursor ve diğerlerinde kullanılabiliyor
- Ajanlar iç içe
useEffect çağrılarını veya ağır istemci import'larını tespit ettiğinde, ilgili kurallara bakarak düzeltme önerebiliyor
- Kurulum komutu:
npx add-skill vercel-labs/agent-skills
- Tam depoya GitHub'daki
react-best-practices adresinden ulaşılabiliyor
2 yorum
https://ywc.life/posts/vercel-react-best-practice
Tam çevirisini yaptım.
Teşekkürler! Keyifle okuyacağım.