renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode, options?)

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

Referensi

renderToStaticNodeStream(reactNode, options?)

Pada server, panggil renderToStaticNodeStream untuk mendapatkan sebuah Node.js Readable Stream.

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

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

Lihat lebih banyak contoh di bawah ini.

Stream akan menghasilkan keluaran HTML yang tidak interaktif dari komponen-komponen React anda.

Parameter

• reactNode: Sebuah node React yang ingin anda render ke dalam HTML. Misalnya, sebuah elemen JSX seperti <Page />.
• 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.

Returns

Sebuah Node.js Readable Stream yang menghasilkan sebuah string HTML. HTML yang dihasilkan tidak bisa dihidrasi (hydrated) di sisi klien.

Caveats

• Keluaran renderToStaticNodeStream tidak dapat dihidrasi (hydrated).

• Method ini akan menunggu semua Suspense boundaries untuk diselesaikan sebelum mengembalikan keluaran apa pun.

• Sejak React 18, metode ini menyangga semua keluarannya, sehingga tidak memberikan keuntungan stream apa pun .

• Stream yang dikembalikan merupakan sebuah byte stream yang encoded dalam utf-8. Jika anda membutuhkan sebuah stream lain yang di-encode, lihatlah ke sebuah proyek seperti iconv-lite, yang memberikan transformasi stream untuk transcoding teks.

Penggunaan

Me-render sebuah pohon React sebagai HTML statis ke dalam sebuah Node.js Readable Stream

Panggil renderToStaticNodeStream untuk mendapatkan sebuah Node.js Readable Stream yang dapat dihubungkan ke respon server:

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

// Sintaks route bergantung pada framework backend yang digunakan
app.use('/', (request, response) => {
  const stream = renderToStaticNodeStream(<Page />);
  stream.pipe(response);
});

Stream akan menghasilkan keluaran awal HTML yang tidak interaktif dari komponen-komponen React anda.