renderToNodeStream

const stream = renderToNodeStream(reactNode, options?)

• Referensi
  • renderToNodeStream(reactNode, options?)
• Penggunaan
  • Me-render pohon React sebagai HTML ke Node.js Readable Stream

Referensi

renderToNodeStream(reactNode, options?)

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 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

• opsional options: Obyek untuk pe-render-an server.
  • opsional identifierPrefix: String prefiks yang digunakan reak untuk ID yang dibuat oleh useId. Ini berguna untuk menghindari konflik ketika menggunakan root yang berbeda di halaman yang sama. Harus merupakan prefiks yang sama yang dioper ke hydrateRoot.

Catatan Penting

• 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 mengenkode stream transformasi untuk transcoding teks.

Penggunaan

Me-render 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 keluaran HTML non-interaktif awal dari komponen React Anda. Pada klien, Anda perlu memanggil hydrateRoot untuk menghidrasi HTML yang dihasilkan server dan membuatnya interaktif.