renderToStaticMarkup

const html = renderToStaticMarkup(reactNode)

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

Referensi

renderToStaticMarkup(reactNode)

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

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.