renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Başvuru dokümanı
  • renderToNodeStream(reactNode, options?)
• Kullanım
  • Bir React ağacını HTML olarak bir Node.js Okunabilir Akışına dönüştürmek

Başvuru dokümanı

renderToNodeStream(reactNode, options?)

Sunucuda, yanıtı aktaracağınız bir Node.js Okunabilir Akışı elde etmek için renderToNodeStream’i çağırın.

import { renderToNodeStream } from 'react-dom/server';

const stream = renderToNodeStream(<App />);
stream.pipe(response);

İstemci tarafında, sunucu tarafında oluşturulan HTML’i etkileşimli hale getirmek için hydrateRoot fonksiyonunu çağırın.

Buradan daha fazla örnek görebilirsiniz.

Parametreler

• reactNode: HTML’e dönüştürmek istediğiniz bir React düğümü. Örneğin, <App /> gibi bir JSX öğesi.

• isteğe bağlı options: Sunucu renderı için bir obje.

  • isteğe bağlı identifierPrefix: useId tarafından oluşturulan kimlikler için React’ın kullandığı string ön eki. Aynı sayfada birden çok kök kullanırken çakışmaları önlemek için kullanışlıdır. hydrateRoot’e iletilen ön ek ile aynı olmalıdır.

Dönüş değeri

Bir HTML string’i üreten bir Node.js Okunabilir Akışı.

Uyarılar

• Bu yöntem, herhangi bir çıkış vermeden önce tüm Suspense sınırlarının tamamlanmasını bekler.

• React 18’den itibaren bu yöntem, tüm çıktılarını arabelleğe alır, bu nedenle aslında hiçbir akış avantajı sağlamaz. Bu nedenle, bunun yerine renderToPipeableStream’e geçmeniz önerilir.

• Dönen akış, utf-8 ile kodlanmış bir bayt akışıdır. Başka bir kodlama ile akışa ihtiyacınız varsa, iconv-lite gibi bir projeye bakabilirsiniz, bu projeler metin dönüştürme akışlarını sağlar.

Kullanım

Bir React ağacını HTML olarak bir Node.js Okunabilir Akışına dönüştürmek

Sunucu yanıtınıza bağlayabileceğiniz Node.js Okunabilir Akışını almak için renderToNodeStream’i çağırın:

import { renderToNodeStream } from 'react-dom/server';

// Rota işleyici sözdizimi arka uç çatınıza bağlı olarak değişir
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

Akış, React bileşenlerinizin başlangıçta etkileşimsiz HTML çıktısını üretecek. İstemci tarafında, bu sunucu tarafında oluşturulan HTML’i hydrate etmek ve etkileşimli hale getirmek için hydrateRoot yöntemini çağırmanız gerekecek.