renderToNodeStream

const stream = renderToNodeStream(reactNode)

• Referensi
  • renderToNodeStream(reactNode)
• Penggunaan
  • Rendering pohon React sebagai HTML ke Node.js Readable Stream

Referensi

renderToNodeStream(reactNode)

Di server, panggil renderToNodeStream untuk mendapatkan Node.js Readable Stream yang dapat Anda salurkan ke respons.

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

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

Di bagian klien, panggil hydrateRoot untuk membuat HTML yang dibuat server interaktif.

Lihat lebih banyak contoh di bawah ini.

Parameter

• reactNode: Node React yang ingin Anda render ke HTML. Contohnya, sebuah elemen JSX seperti <App />

Kembalian

Sebuah Node.js Readable Stream yang mengahislkan string HTML.

Peringatan

• The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like iconv-lite, which provides transform streams for transcoding text.

• Metode ini akan menunggu semua Suspense boundaries selesai sebelum menampilkan keluaran apa pun.

• Pada React 18, metode ini mem-buffer semua keluarannya, sehingga tidak benar-benar memberikan manfaat streaming apa pun. Inilah mengapa Anda disarankan untuk beralih ke renderToPipeableStream sebagai gantinya.

• Stream yang dikembalikan adalah stream byte yang di-enkode dalam utf-8. Jika Anda memerlukan stream dalam enkode lain, lihat proyek seperti iconv-lite, yang meng-enkode stream transformasi untuk transcoding teks.

Penggunaan

Rendering pohon React sebagai HTML ke Node.js Readable Stream

Panggil renderToNodeStream untuk mendapatkan Node.js Readable Stream yang dapat Anda salurkan ke respons server Anda:

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

// Sintaks pengendali rute bergantung pada framework backend Anda
app.use('/', (request, response) => {
  const stream = renderToNodeStream(<App />);
  stream.pipe(response);
});

Stream akan menghasilkan output HTML non-interaktif awal dari komponen React Anda. Pada klien, Anda perlu memanggil hydrateRoot untuk menghidrasi HTML yang dihasilkan server dan membuatnya interaktif.