renderToStaticMarkup

const html = renderToStaticMarkup(reactNode, options?)

• Referensi
  • renderToStaticMarkup(reactNode, options?)
• Penggunaan
  • Me-render pohon React yang non-interaktif sebagai HTML menjadi string

Referensi

renderToStaticMarkup(reactNode, options?)

Pada server, panggil fungsi renderToStaticMarkup untuk me-render aplikasi Anda ke HTML.

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

const html = renderToStaticMarkup(<Page />);

Keluaran yang diberikan adalah HTML non-interaktif dari komponen-komponen React Anda.

Lihat lebih banyak contoh di bawah.

Parameter

• reactNode: Sebuah node React yang Anda ingin render ke HTML. Contohnya, sebuah node 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.

Nilai Balik

Sebuah string HTML.

Caveats

• Keluaran dari renderToStaticMarkup tidak dapat dihidrasi (hydrate).

• renderToStaticMarkup mendukung penggunaan Suspense secara terbatas. Apabila sebuah komponen berada dalam kondisi suspended, renderToStaticMarkup segera mengirimkan fallback-nya sebagai HTML.

• renderToStaticMarkup bekerja dalam peramban, tetapi tidak direkomendasikan untuk digunakan dalam source code klien atau lingkungan peramban tersebut. Apabila Anda ingin me-render komponen ke HTML dalam peramban, ambil HTML dengan cara me-render dalam node DOM.

Penggunaan

Me-render pohon React yang non-interaktif sebagai HTML menjadi string

Panggil renderToStaticMarkup untuk me-render aplikasi Anda dalam sebuah string HTML yang dapat Anda kirimkan dengan respons dari server Anda:

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

// Sintaks router ini tergantung dari framework yang Anda gunakan.
app.use('/', (request, response) => {
  const html = renderToStaticMarkup(<Page />);
  response.send(html);
});

Ini akan memproduksi HTML non-interaktif awal dari komponen-komponen React Anda.