React 18 Akışı: renderToPipeableStream Nasıl Çalışır

React 18'den önce sunucu tarafında işleme, eşzamanlı çalışan renderToString yöntemini kullanıyordu: React, tarayıcıya herhangi bir HTML göndermeden önce bileşen ağacının tamamını bir dize olarak işler. Herhangi bir bileşen veri yüklüyorsa sunucu, ilk bayt kullanıcıya ulaşmadan önce tüm verileri beklemek zorundadır.

React 18, bileşen ağacını HTML parçalarından oluşan bir akış olarak işleyen renderToPipeableStream yöntemini kullanıma sundu. Her şeyin hazır olmasını beklemek yerine React, ağacın her bölümünü tamamladıkça HTML gönderir ve tarayıcının görünür içeriği hemen işlemeye başlamasını sağlar.

renderToPipeableStream iki yöntem içeren bir nesne döndürür: pipe(writable) ve abort(). pipe, bir Node.js Writable akışını (genellikle HTTP yanıtını) kabul eder ve bu akışa HTML göndermeye başlar. abort(), istek iptal edildiğinde veya bir zaman aşımı aşıldığında kullanılan akışı iptal eder.

Akış, bekleyen bir Suspense sınırı tarafından engellenmeyen tüm içerik olan HTML kabuğuyla başlar. Buna belge başı, gezinme, alt bilgi, yerleşim çerçevesi ve eşzamanlı olarak kullanılabilen tüm içerikler dahildir. Kabuk, veriye bağlı bileşenler çözümlenmeden önce hemen akışa gönderilir.

Veri bekleyen Suspense sınırlarının içindeki bileşenler başlangıçta yedek kullanıcı arayüzleri olarak (örneğin bir yükleme göstergesi) akışa gönderilir. React daha sonra yedeği çözümlenmiş içerikle değiştiren bir script etiketi gönderir — tüm bunlar kabuk istemci tarafında yeniden işlenmeden gerçekleşir.

Akışın sonunda bir script etiketi eklemesini söylemek için renderToPipeableStream yöntemine bootstrapScripts: ['/static/js/client.js'] aktarın. Tarayıcı bu paketi yükler ve hydrateRoot çağrısını yaparak React'in olay işleyicilerini sunucuda işlenmiş DOM'a bağlar.

onShellReady, HTML kabuğu (bekleyen Suspense sınırlarının dışındaki her şey) gönderilmeye hazır olduğunda tetiklenir. pipe(res) çağrısını yapmak için doğru an budur — ancak akış HTTP durumunu sabitlediğinden, pipe çağrısından önce HTTP durum kodunu ve yanıt üst bilgilerini ayarlamanız önemlidir.

Akış, pipe() çağrıldığında hemen başladığından, res.setHeader veya res.statusCode atamalarının pipe çağrısından önce yapılması gerekir. Yaygın bir yaklaşım, onShellReady geri çağırmasında durum kodunu 200 ve Content-Type değerini text/html olarak ayarlayıp hemen ardından pipe(res) çağrısını yapmaktır.

onShellError, kabuğun oluşturulması tamamlanmadan önce kurtarılamaz bir hata oluştuğunda tetiklenir — örneğin, en üst düzey bir bileşen herhangi bir Suspense sınırının dışında hata fırlattığında. Bu durumda kısmi bir yanıtı akışa gönderemezsiniz; bunun yerine bir hata sayfasına yönlendirin veya statik bir hata HTML belgesi gönderin.

onAllReady, tüm Suspense sınırları da dâhil olmak üzere React ağacının tamamı çözümlendiğinde tetiklenir. Arama motoru tarayıcıları ve sosyal medya bağlantı önizleme araçları için akış kullanmadan eksiksiz HTML göndermek istersiniz. İsteğin bir bottan gelip gelmediğini kontrol edin ve onShellReady yerine onAllReady içinde pipe(res) çağrısını yapın.

onError, Suspense sınırlarındaki hatalar için tetiklenir — React, bu sınır hata arayüzüne geri dönerken sayfanın geri kalanını akışa göndermeye devam edebilir. Kullanıcı için akışı durdurmadan hatayı gözlemlenebilirlik işlem hattınıza günlüğe kaydetmek için onError kullanın.

Akışı başlatmak için onShellReady yerine onAllReady ne zaman kullanılmalıdır?

renderToPipeableStream, Node.js sunucuları için React 18'in akışlı SSR temel aracıdır. HTML kabuğunu onShellReady aracılığıyla hemen akışa gönderir, veriler çözümlendikçe Suspense sınırlarını doldurur ve bootstrapScripts aracılığıyla istemciyi hidratlar. Botlar ve tarayıcılar için onAllReady, kritik hatalar için onShellError kullanın ve pipe() çağrısından önce HTTP üst bilgilerini her zaman ayarlayın.