diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 6a9021e02..bbfca9b3a 100644 --- a/src/content/reference/react-dom/server/renderToPipeableStream.md +++ b/src/content/reference/react-dom/server/renderToPipeableStream.md @@ -4,7 +4,7 @@ title: renderToPipeableStream -`renderToPipeableStream` renders a React tree to a pipeable [Node.js Stream.](https://nodejs.org/api/stream.html) +`renderToPipeableStream` me-*render* pohon (*tree*) React menjadi [Node.js Stream](https://nodejs.org/api/stream.html) yang *pipeable*. ```js const { pipe, abort } = renderToPipeableStream(reactNode, options?) @@ -16,17 +16,17 @@ const { pipe, abort } = renderToPipeableStream(reactNode, options?) -This API is specific to Node.js. Environments with [Web Streams,](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) like Deno and modern edge runtimes, should use [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) instead. +API ini spesifik untuk Node.js. *Environment* dengan [*Web Streams,*](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) seperti Deno dan *edge runtime* modern, harus menggunakan [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream) sebagai gantinya. --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `renderToPipeableStream(reactNode, options?)` {/*rendertopipeablestream*/} -Call `renderToPipeableStream` to render your React tree as HTML into a [Node.js Stream.](https://nodejs.org/api/stream.html#writable-streams) +Panggil `renderToPipeableStream` untuk me-*render* pohon React Anda sebagai HTML menjadi [*Node.js Stream.*](https://nodejs.org/api/stream.html#writable-streams) ```js import { renderToPipeableStream } from 'react-dom/server'; @@ -40,47 +40,47 @@ const { pipe } = renderToPipeableStream(, { }); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +Di sisi klien, panggil [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) untuk membuat HTML yang dihasilkan *server* menjadi interaktif. -[See more examples below.](#usage) +[Lihat contoh lainnya.](#usage) -#### Parameters {/*parameters*/} +#### Parameter {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. It is expected to represent the entire document, so the `App` component should render the `` tag. +* `reactNode`: Node React yang ingin anda *render* menjadi HTML. Contohnya, sebuah elemen JSX seperti ``. Ini diharapkan mewakili keseluruhan dokumen. Jadi, komponen `App` harus me-*render tag* ``. -* **optional** `options`: An object with streaming options. - * **optional** `bootstrapScriptContent`: If specified, this string will be placed in an inline ` ``` -On the client, your bootstrap script should [hydrate the entire `document` with a call to `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) +Di sisi klien, skrip *bootstrap* Anda harus [menghidrasi seluruh `document` dengan memanggil `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -133,15 +133,15 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the server-generated HTML and make it interactive. +Ini akan melampirkan *event listener* untuk HTML yang dibuat *server* dan menjadikannya interaktif. -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### Membaca path aset CSS and JS dari keluaran build {/*reading-css-and-js-asset-paths-from-the-build-output*/} -The final asset URLs (like JavaScript and CSS files) are often hashed after the build. For example, instead of `styles.css` you might end up with `styles.123456.css`. Hashing static asset filenames guarantees that every distinct build of the same asset will have a different filename. This is useful because it lets you safely enable long-term caching for static assets: a file with a certain name would never change content. +URL aset yang bersifat *final* (seperti file JavaScript and CSS) sering kali di-*hash* setelah proses *build* (pembangunan). Misalnya, alih-alih `styles.css` Anda mungkin mendapatkan `styles.123456.css`. *Hashing* nama file aset statis menjamin sebuah aset pada setiap *build* memiliki nama file yang berbeda. Ini berguna karena memungkinkan anda mengaktifkan *caching* jangka panjang dengan aman untuk aset statis: file dengan nama tertentu tidak akan mengubah konten. -However, if you don't know the asset URLs until after the build, there's no way for you to put them in the source code. For example, hardcoding `"/styles.css"` into JSX like earlier wouldn't work. To keep them out of your source code, your root component can read the real filenames from a map passed as a prop: +Namun, jika Anda tidak mengetahui URL aset hingga selesainya proses *build*, tidak ada cara bagi Anda untuk memasukkan aset tersebut ke dalam *source code.* Misalnya, *hardcoding* `"/styles.css"` dalam JSX seperti sebelumnya tidak akan berfungsi. Untuk menjauhkan aset tersebut dari *source code* Anda, komponen *Root* dapat membaca nama file asli dari *map* yang dioper sebagai *prop:* ```js {1,6} export default function App({ assetMap }) { @@ -158,10 +158,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +Di sisi *server*, *render* `` dan berikan `assetMap` URL aset: ```js {1-5,8,9} -// You'd need to get this JSON from your build tooling, e.g. read it from the build output. +// Anda perlu mendapatkan JSON ini dari build tooling yang Anda gunakan, misalnya dari keluaran build. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -178,10 +178,10 @@ app.use('/', (request, response) => { }); ``` -Since your server is now rendering ``, you need to render it with `assetMap` on the client too to avoid hydration errors. You can serialize and pass `assetMap` to the client like this: +Karena *server* Anda sekarang me-*render* ``, Anda juga perlu me-*render* `assetMap` di sisi klien untuk menghindari *error* hidrasi. Anda dapat melakukan serialisasi dan mengoper `assetMap` kepada klien seperti ini: ```js {9-10} -// You'd need to get this JSON from your build tooling. +// Anda perlu mendapatkan JSON ini dari build tooling yang Anda gunakan. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -189,7 +189,7 @@ const assetMap = { app.use('/', (request, response) => { const { pipe } = renderToPipeableStream(, { - // Careful: It's safe to stringify() this because this data isn't user-generated. + // Hati-hati: di sini aman menggunakan stringify() karena data ini tidak dibuat oleh pengguna. bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['main.js']], onShellReady() { @@ -200,7 +200,7 @@ app.use('/', (request, response) => { }); ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `