renderToNodeStream
renderToNodeStream
me-render pohon (tree) 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.
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.