renderToStaticNodeStream

renderToStaticNodeStream merender sebuah pohon 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 kalian.

Parameter

  • reactNode: Sebuah node React yang ingin kalian 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 di sisi klien.

Batasan

  • Keluaran renderToStaticNodeStream tidak dapat dihidrasi.

  • Metode ini akan menunggu semua Suspense boundaries untuk diselesaikan sebelum mengembalikan keluaran apapun.

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

  • Stream yang dikembalikan merupakan sebuah byte stream yang dienkode dalam utf-8. Jika kalian membutuhkan sebuah stream yang dienkode lainnya, lihatlah ke sebuah proyek seperti iconv-lite, yang memberikan transformasi aliran untuk transcoding teks.


Penggunaan

Merender 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 kalian.

Pitfall

Metode ini merender HTML tidak interaktif yang tidak bisa dihidrasi. Ini berguna jika kalian ingin menggunakan React sebagai sebuah generator halaman statis sederhana, atau jika kalian merender konten statis seperti email.

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