Tam Hidrasyon Sorunu

Hidrasyon, React'in sunucu tarafından oluşturulan HTML'yi alıp ona JavaScript olay dinleyicileri eklediği süreçtir. Sunucu başlangıç HTML'sini (hızlı) gönderir, ardından tarayıcı JavaScript paketini indirir ve React, statik HTML'ye hidrasyon uygulayarak onu etkileşimli hâle getirir. Hidrasyon tamamlanana kadar sayfa etkileşimli görünebilir ancak etkileşimli değildir.

Geleneksel bir SPA, JavaScript paketinin tamamını tarayıcıya gönderir. React'in bu paketi indirmesi, ayrıştırması, yürütmesi ve ardından ağaçtaki her bileşene olay dinleyicileri eklemesi gerekir. Büyük uygulamalarda bu süreç orta segment mobil cihazlarda birkaç saniye sürebilir.

Etkileşime Hazır Olma Süresi, kullanıcının sayfayla etkileşime geçebilmesinin ne kadar sürdüğünü ölçer. Hidrasyon, TTI'yi doğrudan engeller: sayfa hazır görünebilir (sunucu tarafından oluşturulan HTML görünür durumdadır), ancak React olay dinleyicilerini eklemeyi tamamlayana kadar düğmeler ve formlar yanıt vermez. Yüksek bir TTI değeri kötü bir kullanıcı deneyimine işaret eder.

Bir pazarlama sayfasını düşünün: içeriğin %80'i hiçbir zaman değişmeyen statik metin, görsel ve başlıklardan oluşur. Yalnızca %20'si bülten formu veya video oynatıcı gibi etkileşimli araçları içerir. Geleneksel SPA hidrasyonu yine de sayfanın %100'ünde çalışır ve statik bileşenleri gereksiz yere işler.

Chrome DevTools performans profili, hidrasyon maliyetini ortaya çıkarır. Ana iş parçacığı zaman çizelgesinde, ilk boyamadan sonra uzun bir JavaScript yürütme bloğu olarak React hidrasyonu görevini belirleyebilirsiniz. Bu blok ne kadar uzunsa ana iş parçacığı o kadar meşgul olur ve sayfa o kadar az yanıt verir.

React bileşen ağacı ne kadar büyükse hidrasyon için gereken iş de o kadar artar. React'in her bileşeni ziyaret etmesi, sunucu tarafından oluşturulan HTML'yi bileşenin oluşturacağı çıktıyla karşılaştırması ve olay dinleyicilerini eklemesi gerekir. Yüzlerce bileşen içeren karmaşık bir sayfa, hızlı cihazlarda bile ölçülebilir bir hidrasyon ek yüküne sahip olabilir.

React 18, React'in hidrasyonu daha küçük parçalara ayırıp bu parçaların arasında tarayıcıya kontrolü bırakmasına olanak tanıyan eşzamanlı hidrasyonu kullanıma sundu. Bu, büyük ağaçların hidrasyonu sırasında tarayıcının tamamen donmuş görünmesini önler. Ancak eşzamanlı hidrasyon etkiyi azaltır; temel maliyeti ortadan kaldırmaz.

Seçimli hidrasyon (Suspense aracılığıyla), React'in bileşenlere öncelik sırasına göre hidrasyon uygulamasını sağlar — kullanıcı etkileşimleri, ilgili bileşenin anında hidrate edilmesini tetikler. Bu, yanıt verebilirliği artırır ancak yine de tek bir React ağacı içinde çalışır: ağaçtaki tüm bileşenlere sonunda hidrasyon uygulanır.

Adalar Mimarisi'nin temelindeki içgörü, tipik bir sayfanın çoğunun aslında JavaScript'e hiç ihtiyaç duymadığıdır. Gezinme çubukları, öne çıkan bölümler, alt bilgi bağlantıları, blog yazısı metinleri ve ürün açıklamaları yalnızca sunuma yöneliktir. Bu bölümlere zorla hidrasyon uygulamak, tanımı gereği israftır.

Web performansı ekiplerinin araştırmaları, JavaScript ayrıştırma ve yürütme süresinin mobil cihazlardaki baskın maliyet olduğunu gösteriyor. 300 KB'lık bir JavaScript paketinin ortalama bir Android telefonda ayrıştırılması 2-3 saniye sürer. Tarayıcıya gönderilen JavaScript'i azaltmak, React içi optimizasyonlara kıyasla çok daha büyük performans kazanımları sağlar.

Bir React uygulamasına eklenen her kilobayt JavaScript, hidrasyon işini artırır. Bir bileşen yalnızca dekoratif olsa bile React ağacında yer alıyorsa hidrasyona katılır. Bu hidrasyon vergisi uygulama boyutuyla birlikte büyür ve uygulamalar genişledikçe iyi TTI değerlerini korumayı giderek zorlaştırır.

React hidrasyonu ile Etkileşime Hazır Olma Süresi (TTI) arasındaki ilişki nedir?

Geleneksel React hidrasyonu, JavaScript'e ihtiyaç duymayan statik içerikler dahil bileşen ağacının tamamını işler. Bu, Etkileşime Hazır Olma Süresini engeller ve uygulama boyutuyla birlikte kötüleşir. React 18'in eşzamanlı ve seçimli hidrasyon geliştirmeleri etkiyi azaltır ancak temel maliyeti ortadan kaldırmaz. Temel içgörü şudur: sayfa içeriğinin çoğunun aslında JavaScript'e ihtiyacı yoktur; bu nedenle tam hidrasyon israftır.