diff --git a/src/content/reference/react-dom/server/renderToString.md b/src/content/reference/react-dom/server/renderToString.md index 41bc6a982..f1307c66c 100644 --- a/src/content/reference/react-dom/server/renderToString.md +++ b/src/content/reference/react-dom/server/renderToString.md @@ -4,13 +4,13 @@ title: renderToString -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` tidak mendukung *streaming* atau menunggu data. [Lihat beberapa alternatifnya.](#alternatives) -`renderToString` renders a React tree to an HTML string. +`renderToString` me-*render* pohon (*tree*) React menjadi *string* HTML. ```js const html = renderToString(reactNode) @@ -22,11 +22,11 @@ const html = renderToString(reactNode) --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `renderToString(reactNode)` {/*rendertostring*/} -On the server, call `renderToString` to render your app to HTML. +Di server, panggil `renderToString` untuk me-*render* aplikasi Anda ke HTML. ```js import { renderToString } from 'react-dom/server'; @@ -34,81 +34,81 @@ import { renderToString } from 'react-dom/server'; const html = renderToString(); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +Di klien, panggil [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) untuk membuat HTML yang dibuat server interaktif. -[See more examples below.](#usage) +[Lihat lebih banyak contoh di bawah.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX node like ``. +* `reactNode`: Node React yang ingin Anda render ke HTML. Contohnya, sebuah elemen JSX seperti `` -#### Returns {/*returns*/} +#### Kembalian {/*returns*/} -An HTML string. +Sebuah *string* HTML. -#### Caveats {/*caveats*/} +#### Peringatan {/*caveats*/} -* `renderToString` has limited Suspense support. If a component suspends, `renderToString` immediately sends its fallback as HTML. +* `renderToString` memiliki dukungan *Suspense* yang terbatas. Jika komponen ditangguhkan, `renderToString` secara langsung mengirimkan kembaliannya sebagai HTML. -* `renderToString` works in the browser, but using it in the client code is [not recommended.](#removing-rendertostring-from-the-client-code) +* `renderToString` bekerja di peramban, tapi menggunakannya di kode klien [tidak direkomendasikan.](#removing-rendertostring-from-the-client-code) --- -## Usage {/*usage*/} +## Penggunaan {/*usage*/} -### Rendering a React tree as HTML to a string {/*rendering-a-react-tree-as-html-to-a-string*/} +### Me-render pohon React sebagai HTML menjadi string {/*rendering-a-react-tree-as-html-to-a-string*/} -Call `renderToString` to render your app to an HTML string which you can send with your server response: +Panggil `renderToString` untuk me-*render* aplikasi Anda ke *string* HTML yang dapat Anda kirim dengan respons server Anda: ```js {5-6} import { renderToString } from 'react-dom/server'; -// The route handler syntax depends on your backend framework +// Sintaksis pengendali rute bergantung pada framework backend Anda app.use('/', (request, response) => { const html = renderToString(); response.send(html); }); ``` -This will produce the initial non-interactive HTML output of your React components. On the client, you will need to call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to *hydrate* that server-generated HTML and make it interactive. +Ini akan menghasilkan output HTML non-interaktif awal dari komponen React Anda. Pada klien, Anda perlu memanggil [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) untuk *menghidrasi* HTML yang dihasilkan server dan membuatnya interaktif. -`renderToString` does not support streaming or waiting for data. [See the alternatives.](#alternatives) +`renderToString` tidak mendukung *streaming* atau menunggu data. [Lihat beberapa alternatifnya.](#alternatives) --- -## Alternatives {/*alternatives*/} +## Alternatif {/*alternatives*/} -### Migrating from `renderToString` to a streaming method on the server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} +### Migrasi dari `renderToString` ke metode streaming di server {/*migrating-from-rendertostring-to-a-streaming-method-on-the-server*/} -`renderToString` returns a string immediately, so it does not support streaming or waiting for data. +`renderToString` mengembalikan *string* dengan seketika, sehingga tidak mendukung *streaming* atau menunggu data. -When possible, we recommend using these fully-featured alternatives: +Saat memungkinkan, kami merekomendasikan untuk menggunakan alternatif yang berfitur lengkap ini: -* If you use Node.js, use [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) -* If you use Deno or a modern edge runtime with [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API), use [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) +* Jika Anda menggunakan Node.js, gunakan [`renderToPipeableStream`.](/reference/react-dom/server/renderToPipeableStream) +* Jika Anda menggunakan Deno atau *edge runtime* modern dengan [Web Streams](https://developer.mozilla.org/en-US/docs/Web/API/Streams*API), gunakan [`renderToReadableStream`.](/reference/react-dom/server/renderToReadableStream) -You can continue using `renderToString` if your server environment does not support streams. +Anda dapat terus menggunakan `renderToString` jika *environment* server Anda tidak mendukung *streaming*. --- -### Removing `renderToString` from the client code {/*removing-rendertostring-from-the-client-code*/} +### Menghapus `renderToString` dari kode klien {/*removing-rendertostring-from-the-client-code*/} -Sometimes, `renderToString` is used on the client to convert some component to HTML. +Terkadang, `renderToString` digunakan pada klien untuk mengkonversi beberapa komponen ke HTML. ```js {1-2} -// 🚩 Unnecessary: using renderToString on the client +// 🚩 Tidak perlu: menggunakan renderToString pada klien import { renderToString } from 'react-dom/server'; const html = renderToString(); -console.log(html); // For example, "..." +console.log(html); // Contohnya, "..." ``` -Importing `react-dom/server` **on the client** unnecessarily increases your bundle size and should be avoided. If you need to render some component to HTML in the browser, use [`createRoot`](/reference/react-dom/client/createRoot) and read HTML from the DOM: +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`](/reference/react-dom/client/createRoot) dan baca HTML dari DOM: ```js import { createRoot } from 'react-dom/client'; @@ -119,20 +119,19 @@ const root = createRoot(div); flushSync(() => { root.render(); }); -console.log(div.innerHTML); // For example, "..." +console.log(div.innerHTML); // Contohnya, "..." ``` -The [`flushSync`](/reference/react-dom/flushSync) call is necessary so that the DOM is updated before reading its [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML) property. +Memanggil [`flushSync`](/reference/react-dom/flushSync) diperlukan agar DOM diperbarui sebelum membaca [`innerHTML`](https://developer.mozilla.org/en-US/docs/Web/API/Elemen/innerHTML). --- -## Troubleshooting {/*troubleshooting*/} +## Penyelesaian Masalah {/*troubleshooting*/} -### When a component suspends, the HTML always contains a fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} +### Saat komponen ditangguhkan, HTML selalu berisi fallback {/*when-a-component-suspends-the-html-always-contains-a-fallback*/} -`renderToString` does not fully support Suspense. +`renderToString` tidak sepenuhnya mendukung *Suspense*. -If some component suspends (for example, because it's defined with [`lazy`](/reference/react/lazy) or fetches data), `renderToString` will not wait for its content to resolve. Instead, `renderToString` will find the closest [``](/reference/react/Suspense) boundary above it and render its `fallback` prop in the HTML. The content will not appear until the client code loads. - -To solve this, use one of the [recommended streaming solutions.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) They can stream content in chunks as it resolves on the server so that the user sees the page being progressively filled in before the client code loads. +Jika beberapa komponen ditangguhkan (misalnya, karena ditentukan dengan [`lazy`](/reference/react/lazy) atau mengambil data), `renderToString` tidak akan menunggu kontennya diselesaikan. Sebagai gantinya, `renderToString` akan menemukan batas [``](/reference/react/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.](#migrating-from-rendertostring-to-a-streaming-method-on-the-server) Mereka dapat melakukan *streaming* konten dalam potongan-potongan saat diselesaikan di server sehingga pengguna melihat halaman diisi secara progresif sebelum kode klien dimuat.