renderToString

const html = renderToString(reactNode, options?)

• Referensi
  • renderToString(reactNode, options?)
• Penggunaan
  • Me-render pohon React sebagai HTML menjadi string
• Alternatif
  • Migrasi dari renderToString ke metode streaming di server
  • Migrasi renderToString menjadi prerender statis di server
  • Menghapus renderToString dari kode klien
• Penyelesaian Masalah
  • Saat komponen ditangguhkan, HTML selalu berisi fallback

Referensi

renderToString(reactNode, options?)

Di server, panggil renderToString untuk me-render aplikasi Anda ke HTML.

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

const html = renderToString(<App />);

Di klien, panggil hydrateRoot untuk membuat HTML yang dibuat server interaktif.

Lihat lebih banyak contoh di bawah.

Parameter

• reactNode: Node React yang ingin Anda render ke HTML. Contohnya, sebuah elemen JSX seperti <App />

Kembalian

• 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. Harus merupakan prefiks yang sama yang dioper ke hydrateRoot.

Sebuah string HTML.

Peringatan

• renderToString memiliki dukungan Suspense yang terbatas. Jika komponen ditangguhkan, renderToString secara langsung mengirimkan kembaliannya sebagai HTML.

• renderToString bekerja di peramban, tapi menggunakannya di kode klien tidak direkomendasikan.

Penggunaan

Me-render pohon React sebagai HTML menjadi string

Panggil renderToString untuk me-render aplikasi Anda ke string HTML yang dapat Anda kirim dengan respons server Anda:

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

// Sintaksis pengendali rute bergantung pada framework backend Anda
app.use('/', (request, response) => {
  const html = renderToString(<App />);
  response.send(html);
});

Ini akan menghasilkan output HTML non-interaktif awal dari komponen React Anda. Pada klien, Anda perlu memanggil hydrateRoot untuk menghidrasi HTML yang dihasilkan server dan membuatnya interaktif.

Alternatif

Migrasi dari renderToString ke metode streaming di server

renderToString segera mengembalikan string, ehingga tidak mendukung streaming konten saat dimuat.

Saat memungkinkan, kami merekomendasikan untuk menggunakan alternatif yang berfitur lengkap ini:

• Jika Anda menggunakan Node.js, gunakan renderToPipeableStream.
• Jika Anda menggunakan Deno atau edge runtime modern dengan Web Streams, gunakan renderToReadableStream.

Anda dapat terus menggunakan renderToString jika environment server Anda tidak mendukung streaming.

Migrasi renderToString menjadi prerender statis di server

renderToString segera mengembalikan string, jadi tidak mendukung penantian data untuk dimuat guna pembuatan HTML statis.

Kami sarankan untuk menggunakan alternatif berfitur lengkap berikut:

• Jika Anda menggunakan Node.js, gunakan prerenderToNodeStream.
• Jika Anda menggunakan Deno atau runtime edge modern dengan Web Streams, gunakan prerender.

Anda dapat terus menggunakan renderToString jika lingkungan pembuatan situs statis Anda tidak mendukung stream.

Menghapus renderToString dari kode klien

Terkadang, renderToString digunakan pada klien untuk mengkonversi beberapa komponen ke HTML.

// 🚩 Tidak perlu: menggunakan renderToString pada klien
import { renderToString } from 'react-dom/server';

const html = renderToString(<MyIcon />);
console.log(html); // Contohnya, "<svg>...</svg>"

Mengimpor react-dom/server pada klien meningkatkan ukuran bundel Anda secara tidak perlu dan harus dihindari. Jika Anda perlu me-render beberapa komponen ke HTML di peramban, gunakan createRoot dan baca HTML dari DOM:

import { createRoot } from 'react-dom/client';
import { flushSync } from 'react-dom';

const div = document.createElement('div');
const root = createRoot(div);
flushSync(() => {
  root.render(<MyIcon />);
});
console.log(div.innerHTML); // Contohnya, "<svg>...</svg>"

Memanggil flushSync diperlukan agar DOM diperbarui sebelum membaca innerHTML.

Penyelesaian Masalah

Saat komponen ditangguhkan, HTML selalu berisi fallback

renderToString tidak sepenuhnya mendukung Suspense.

Jika beberapa komponen ditangguhkan (misalnya, karena didefinisikan dengan lazy atau mengambil data), renderToString tidak akan menunggu kontennya diselesaikan. Sebaliknya, renderToString akan menemukan batas <Suspense> terdekat di atasnya dan merender prop fallback-nya dalam HTML. Konten tidak akan muncul hingga kode klien dimuat.

Untuk mengatasi hal ini, gunakan salah satu solusi streaming yang direkomendasikan. Untuk rendering sisi server, mereka dapat mengalirkan konten dalam potongan saat diselesaikan di server sehingga pengguna melihat halaman diisi secara bertahap sebelum kode klien dimuat. Untuk pembuatan situs statis, mereka dapat menunggu semua konten diselesaikan sebelum membuat HTML statis.