Vercel, React en iyi uygulamaları deposunu yayınladı

• 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
  1. Waterfall'ları ortadan kaldırmak
  2. 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

[ywc0008]

https://ywc.life/posts/vercel-react-best-practice
Tam çevirisini yaptım.

[honglu]

Teşekkürler! Keyifle okuyacağım.