renderToStaticNodeStream

renderToStaticNodeStream me-render sebuah pohon (tree) React yang tidak interaktif ke dalam sebuah Node.js Readable Stream.

const stream = renderToStaticNodeStream(reactNode)

Referensi

renderToStaticNodeStream(reactNode)

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

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.

Pitfall

Method ini me-render HTML tidak interaktif yang tidak bisa dihidrasi (hydrated). Ini berguna jika anda ingin menggunakan React sebagai sebuah generator halaman statis sederhana, atau jika anda merender konten statis seperti email.

Aplikasi interaktif sebaiknya menggunakan renderToPipeableStream pada server dan hydrateRoot pada klien.