renderToString

const html = renderToString(reactNode)

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

Referensi

renderToString(reactNode)

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

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.