renderToStaticNodeStream

renderToStaticNodeStream interaktif olmayan bir React ağacını Okunabilir Node.js Akışına render etmenize olanak tanır.

const stream = renderToStaticNodeStream(reactNode)

Başvuru dokümanı

renderToStaticNodeStream(reactNode)

Sunucuda, Okunabilir Node.js Akışı elde etmek için renderToStaticNodeStream fonksiyonunu çağırınız.

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

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

Buradan daha fazla örnek görebilirsiniz.

Akış, React bileşenlerinizin etkileşimli olmayan HTML çıktılarını üretecektir.

Parametreler

  • reactNode: HTML’e render etmek istediğiniz bir React düğümü. Örneğin, <Sayfa /> gibi bir JSX elemanı.

  • optional options: An object for server render.

    • optional identifierPrefix: A string prefix React uses for IDs generated by useId. Useful to avoid conflicts when using multiple roots on the same page.

Dönüş Değeri

HTML string’i döndüren bir Okunabilir Node.js Akışı döndürür. Ortaya çıkan HTML istemcide sulanamaz.

Uyarılar

  • renderToStaticNodeStream çıktısı sulanamaz.

  • Bu yöntem, herhangi bir çıktı döndürmeden önce tüm Suspense sınırlarının tamamlanmasını bekler.

  • React 18’den itibaren, bu yöntem tüm çıktısını ara belleğe alır, aslında bu nedenle herhangi bir akış avantajı sağlamaz.

  • Döndürülen akış utf-8 olarak kodlanmış bir byte akışıdır. Başka bir kodlamada akışa ihtiyacınız varsa, metni dönüştürmek için dönüştürme akışları sağlayan iconv-lite gibi bir projeye göz atabilirsiniz.


Kullanım

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

Sunucu yanıtınıza aktarabileceğiniz bir Okunabilir Node.js Akışı elde etmek için renderToStaticNodeStream fonksiyonunu çağırabilirsiniz:

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

// Route handler syntax backend çatınıza bağlıdır
app.use('/', (request, response) => {
const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);
});

Akış, React bileşenlerinizin etkileşimli olmayan ilk HTML çıktısını üretecektir.

Tuzak

Bu yöntem, sulanamayan ve interaktif olmayan HTML oluşturur. Bu yöntem, React’i basit bir statik sayfa oluşturucu olarak kullanmak istiyorsanız veya e-postalar gibi tamamen statik içerik oluşturuyorsanız kullanışlıdır.

İnteraktif uygulamalar renderToPipeableStream’i sunucu tarafında kullanmalıdır. hydrateRoot’u ise kullanıcı tarafında kullanmalıdır.