- NYT mühendisleri sayfa performansına, SEO'ya ve güncel teknolojileri korumaya yüksek önem veriyor
- React 18 yükseltmesini gerçekleştirirken ortaya çıkan bazı sorunları çözüp büyük bir performans artışı elde ettiler
- React 18'in başlıca avantajları: Concurrent Mode sayesinde daha akıcı render alma, otomatik batching ve transition'lar, server-side rendering ve streaming güncellemeleri gibi özellikler
- Yükseltmeyle birlikte sayfa yanıt verebilirliğini ölçen INP (Interaction to Next Paint) skorunda iyileşme bekleniyordu
Migrasyon süreci
- Artık kullanılmayan Enzyme test kütüphanesi, @testing-library/react ile değiştirildi
- React 18'in yeni özelliklerini güvenle entegre etmek için temel bağımlılıklar, tipler ve testler React 18'e uygun şekilde yükseltildi
- React 18 özelliklerini uygulamak için yeni
createRoot ve hydrateRoot API'leri kullanıldı
- İlk dağıtımdan sonra özel "embedded interactive" yapılarında beklenmedik sorunlar ortaya çıktı
- React 18, önceki sürümlere göre hydration uyumsuzluklarına daha duyarlı olduğundan, ya hydration uyumsuzlukları düzeltilmeli ya da böyle bir durum oluştuğunda istemci tarafında embedded interactive yeniden mount edilmeliydi
- Tüm hydration uyumsuzluklarını güvenli biçimde düzeltmek zor bir işti
Embedded interactive script'lerinin manuel olarak çıkarılması ve çalıştırılması
- Tarayıcı güvenliği nedeniyle
innerHTML prop'u üzerinden eklenen script etiketleri otomatik olarak çalışmaz
- Script etiketlerini doğru şekilde çalıştırmak için, etkileşimli HTML içinden çıkarılıp kaldırılmaları ve ardından bileşen yeniden render edildiğinde doğru konuma tekrar eklenmeleri gerekir
- Bazı interactive script'lerin yeniden eklenirken doğru sırayla yüklenmesi gerekir
- Önce statik veri içeren manifest script'i eklenir
src niteliği olan script'ler asenkron olarak çalıştırılır- Son olarak
innerHTML içinde vanilla JavaScript barındıran script eklenip çalıştırılır
Anında performans iyileşmesi
- Embedded interactive koduna yönelik ayrıntılı kontrol mekanizması entegre edildikten sonra React 18 güvenli biçimde dağıtıma alınabildi
- Dağıtımdan sonra INP skorunun yaklaşık %30 düşmesi gibi neredeyse anında performans iyileşmeleri görüldü
- React 18'in otomatik batching ve concurrency özellikleri sayesinde sayfa yüklenirken oluşan yeniden render'lar yaklaşık yarı yarıya azaldı
İleriye dönük yön
startTransition ve React Server Components gibi yeni özelliklerin potansiyel faydalarını incelemeye odaklanılacak- INP skorunu sürekli düşürmek ve genel işlevselliği iyileştirmek başlıca hedef
- Halihazırda kullanılan React sürümünde kararlı ve güvenilir performansın garanti edilmesi en yüksek öncelik
- Haber sitesindeki sonuçlara dayanarak diğer sitelerde de benzer performans kazanımları hedefleniyor
- Google'ın SEO algoritma değişikliğinden önce INP skoru "zayıf" aralığından çıkarıldı ve olumsuz bir SEO sonucu yaşanmadı
Henüz yorum yok.