renderToString
renderToString
me-render pohon (tree) React menjadi string HTML.
const html = renderToString(reactNode, options?)
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 olehuseId
. Ini berguna untuk menghindari konflik ketika menggunakan root yang berbeda di halaman yang sama. Harus merupakan prefiks yang sama yang dioper kehydrateRoot
.
- opsional
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
mengembalikan string dengan seketika, sehingga tidak mendukung streaming atau menunggu data.
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.
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 ditentukan dengan lazy
atau mengambil data), renderToString
tidak akan menunggu kontennya diselesaikan. Sebagai gantinya, renderToString
akan menemukan batas <Suspense>
terdekat di atasnya dan merender prop fallback
di HTML. Konten tidak akan muncul hingga kode klien dimuat.
Untuk mengatasinya, gunakan salah satu solusi streaming yang disarankan. Mereka dapat melakukan streaming konten dalam potongan-potongan saat diselesaikan di server sehingga pengguna melihat halaman diisi secara progresif sebelum kode klien dimuat.