renderToNodeStream
renderToNodeStream
merender pohon React ke dalam Node.js Readable Stream.
const stream = renderToNodeStream(reactNode)
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 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 menghasilkan string HTML.
Peringatan
-
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.