renderToNodeStream

const stream = renderToNodeStream(reactNode)

• Referensi
  • renderToNodeStream(reactNode)
• Penggunaan
  • Me-render 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 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.