Kenar Üzerinden Akışlı SSR

Bir sunucu HTML'yi akışla gönderdiğinde tarayıcı, belgenin tamamını beklemek yerine içeriği parçalar halinde alır ve oluşturur. Böylece kullanıcılar sayfanın üst bilgi, gezinme ve ana tanıtım bölümü gibi görünür kısımlarını, veriye bağlı daha yavaş bölümler hâlâ yüklenirken görebilir ve bu kısımlarla etkileşime geçebilir.

bootstrapScripts'i renderToReadableStream'e geçirmek, React'e istemci tarafındaki JS paketinin nerede bulunduğunu bildirir. React, tarayıcının paketi yükleyip hydrateRoot'u çağırabilmesi için akışın sonuna bir betik etiketi ekler; böylece her bölümün akışla gönderilmesi tamamlandıkça sayfa etkileşimli hale gelir.

React'in akış özelliği, bileşen ağacını bağımsız olarak akışa alınabilen bölümlere ayırmak için Suspense sınırlarına dayanır. Bir Suspense sınırı içinde veri bekleyen bileşenler (fırlatılan bir Promise aracılığıyla) önce yer tutucu olarak gönderilir, ardından çözümlenerek gerçek içeriklerini gönderir.

onShellReady geri çağırma işlevi, askıya alınmamış HTML kabuğu — Suspense sınırlarının dışındaki her şey — akışa hazır olduğunda tetiklenir. HTTP durum kodunu ve yanıt başlıklarını ayarlayıp ardından pipe(res) çağrısı yapmanın veya ReadableStream'den okumaya başlamanın doğru anı budur.

HTTP durum kodları ve başlıkları, yanıt gövdesi başlamadan önce gönderilmelidir. Akış onShellReady ile başladığı için tüm hata işleme mantığı (durum kodunu 500 olarak ayarlama, yönlendirme), kabuk akmaya başlamadan önce gerçekleşmelidir — akış başladıktan sonra durum kodu sabitlenir.

onShellError, kabuk hazır olmadan önce kritik bir hata oluştuğunda tetiklenir — örneğin Suspense sınırlarının dışındaki üst düzey bir bileşende hata oluştuğunda. Bu durumda kabuk hiç akışa alınmaz; statik bir hata sayfasıyla yanıt vermeli veya bir hata rotasına yönlendirmelisiniz.

onError, Suspense sınırları içindeki kurtarılabilir hatalarda tetiklenir. React yine de sayfanın geri kalanını akışa alabilir; hata oluşan sınır, hata için yedek kullanıcı arayüzünü oluşturur. onError'ı günlük kaydı için kullanın: akışı durdurmadan hatayı gözlemlenebilirlik platformunuza kaydedin.

Bir Suspense sınırının verilerinin gelmesi çok uzun sürüyorsa kabuk içeriğini yine de akışa verin ve sınırın istemci tarafında etkinleştirilmesine izin verin. Bir zaman aşımı uygulayın: 5 saniye sonra, sınır çözümlenmemişse akış üzerinde abort() çağrısı yapın; istemci de verileri useEffect aracılığıyla kendisi alır.

Workers çalışma zamanı, ReadableStream'i doğrudan Response gövdesi olarak aktarır. Cloudflare altyapısı, belgenin tamamını arabelleğe almadan, React ürettikçe her parçayı kullanıcının tarayıcısına iletir. Bu, HTML'nin ilk baytlarının istek ulaştıktan sonra milisaniyeler içinde uç PoP'tan çıkması anlamına gelir.

renderToReadableStream bir iptal denetleyicisi işlevi döndürür. İstek iptal edilirse (kullanıcı başka bir sayfaya giderse) abort() çağrısı yapmak, React'in işlemeyi ve verileri işlemeye devam etmesini durdurur. Bu, artık sahibi olmayan istekler için boşa hesaplama yapılmasını önler ve Worker CPU kullanımını sınırlar.

Uçtan akış kullanıldığında tam gecikme zinciri şöyledir: 5 ms (istekten en yakın PoP'a) + 2 ms (Worker'ın soğuk başlatılması) + 8 ms (kabuk oluşturma) = ilk bayta kadar 15 ms. Kullanıcının tarayıcısı, sayfanın geri kalanı arka planda akmaya devam ederken kabuktaki LCP öğesini oluşturur.

onShellReady geri çağırma işlevi, akış üzerinden SSR sırasında tam olarak ne zaman çalışır?

Uçtan akışla SSR, HTML'yi parçalar hâlinde ileterek kabuğu hemen gönderir ve FCP ile LCP'yi iyileştirir. Suspense sınırları, ağaç yapısını bağımsız olarak akışa verilebilen bölümlere ayırır. onShellReady, akışı başlatma sinyalidir — bunu çağırmadan önce durum kodlarını ayarlayın. onShellError kurtarılamayan hataları, onError kurtarılabilir hataları ele alır; abort() ise iptal edilen isteklerde boşa çalışma yapılmasını önler.