Suspense Sınırları ve Akış Önceliği

Suspense sınırları, akış ayrıntı düzeyinin temel birimidir. Bileşen ağacınızdaki her Suspense sınırı, bağımsız olarak akışa gönderilebilen bir bölüm oluşturur — React, her sınırı diğerlerinden bağımsız olarak kendi hızında çözümler ve akışa gönderir.

Kabuk, Suspense sınırlarının dışındaki her şeyden oluşur: düzen, gezinme, alt bilgi ve eş zamanlı olarak kullanılabilen tüm içerik. Kabuk önce ve hızlı bir şekilde akışa gönderilir; böylece veri bağımlı bölümler arka planda yüklenirken kullanıcılar sayfa yapısını hemen görür.

React kabuğu akışa gönderdiğinde, verileri henüz kullanılamayan tüm Suspense sınırları geri dönüş arayüzleri olarak oluşturulur — genellikle bir yükleme iskeleti veya döndürücü. Bu geri dönüş arayüzü ilk HTML yanıtına dâhil edilir; böylece kullanıcı boş bir alan yerine hemen bir yükleme göstergesi görür.

Bir Suspense sınırının verileri çözümlendiğinde React, çözümlenmiş HTML'yi küçük bir satır içi betikle birlikte akışa gönderir. Bu betik, yeni akışa gönderilen içeriği gizli bir şablon öğesinden DOM içindeki doğru konuma taşır ve geri dönüş arayüzünün yerini tam sayfa yeniden yüklemesi olmadan almasını sağlar.

React, HTML şablon öğesi örüntüsünü kullanır: çözümlenmiş Suspense içeriği gizli bir şablona akışla gönderilir, ardından bir betik, şablon içeriğini doğru DOM konumuna aktarmak için React'in dahili bir işlevini çağırır. Bu, değişim işlemi için JS çerçevesi gerektirmeyen DOM değişikliklerini mümkün kılar.

İç içe Suspense sınırlarının çözümleme zaman çizelgeleri birbirinden bağımsızdır. İçteki bir Suspense sınırı, dış sınırından önce çözümlenebilir — React, dış sınırın çözülüp çözülmediğine bakmaksızın içeriği hazır olur olmaz akışa gönderir. Bu, veri yüklemesindeki paralelliği en üst düzeye çıkarır.

Etkili Suspense yerleştirme yaklaşımında yavaş ve veri bağımlı bileşenler Suspense sınırlarının içine, hızlı, statik veya eş zamanlı olarak kullanılabilen içerikler ise dışına konur. Gezinme çubukları, statik metin içeren öne çıkan bölümler ve alt bilgiler dışarıda yer alır. Ürün listeleri, kullanıcı panoları ve yorum akışları içeride yer alır.

React, Suspense sınırlarını belgede göründükleri sıraya göre değil, çözümlendikçe akışa gönderir. Görüntü alanının altındaki bir bölüm, daha az veri gerektiriyorsa görüntü alanının üstündeki bir bölümden önce çözümlenebilir. React, akış sırası ne olursa olsun DOM ekleme işlemini doğru şekilde gerçekleştirir.

React 18'in seçmeli hidratasyonu kullanıcı etkileşimine yanıt verir: kullanıcı henüz hidratlanmamış bir Suspense sınırına tıklar veya üzerine gelirse React, önce o sınırın hidratlanmasına öncelik verir. Böylece sayfanın diğer bölümleri hâlâ hidratlanıyor olsa bile kullanıcı etkileşimleri yanıt veriyormuş gibi hissettirir.

Daha fazla Suspense sınırı daha fazla akış esnekliği sağlar; ancak çok fazla sınır, satır içi değiştirme betiklerinin ek yükünü oluşturur. Uygulanabilir bir kılavuz olarak tek tek bileşenler yerine bütün "bölümleri" (ilk görüntü alanındaki içerik, kenar çubuğu, görüntü alanının altındaki akış) sarmalayın. Sayfa başına bir ila üç Suspense sınırı yaygın olarak en uygun dengedir.

Chrome DevTools Ağ sekmesinde "Günlüğü koru" seçeneğini kullanın ve yanıtın akışını gözlemleyin: HTML belgesi parçalar hâlinde büyür. Performans sekmesi FCP ve LCP işaretlerini gösterir — iyileşmeyi ölçmek için akışlı ve akışsız derlemeleri karşılaştırın. Etkiyi belirginleştirmek için bağlantı hızını Hızlı 3G ile sınırlayın.

İlk akışlı HTML yanıtında bir Suspense sınırının geri dönüş arayüzüne ne olur?

Suspense sınırları, React ağacınızı bağımsız olarak akışa gönderilebilen bölümlere ayırır. Kabuk (Suspense dışındaki bölüm) önce akışa gönderilir; bekleyen sınırlar için geri dönüş arayüzleri hemen görünür; çözümlenmiş içerik satır içi betikler aracılığıyla geri dönüş arayüzlerinin yerini alır. İç içe sınırların zaman çizelgeleri birbirinden bağımsızdır. En uygun akış ayrıntı düzeyi için sınırları bölüm düzeyinde yerleştirin ve etkileşim kaynaklı hidratasyon sırasını React'in öncelik sistemine bırakın.