From ba800ea3d8328eec24fc764ac3b02ff1444e0016 Mon Sep 17 00:00:00 2001 From: Hisam Fahri Date: Sun, 28 May 2023 16:53:49 +0700 Subject: [PATCH] docs: translate `renderToReadableStream` section (#497) Co-authored-by: Irfan Maulana Co-authored-by: RiN --- .../server/renderToReadableStream.md | 198 +++++++++--------- 1 file changed, 99 insertions(+), 99 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index d6d5b3264..ec15d6ddd 100644 --- a/src/content/reference/react-dom/server/renderToReadableStream.md +++ b/src/content/reference/react-dom/server/renderToReadableStream.md @@ -4,7 +4,7 @@ title: renderToReadableStream -`renderToReadableStream` renders a React tree to a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +`renderToReadableStream` me-*render* sebuah pohon (*tree*) React menjadi [*Readable Web Stream.*](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) ```js const stream = await renderToReadableStream(reactNode, options?) @@ -16,17 +16,17 @@ const stream = await renderToReadableStream(reactNode, options?) -This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) For Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +API ini bergantung ke [*Web Streams*.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) Untuk Node.js, gunakan [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) sebagai gantinya. --- -## Reference {/*reference*/} +## Referensi {/*reference*/} ### `renderToReadableStream(reactNode, options?)` {/*rendertoreadablestream*/} -Call `renderToReadableStream` to render your React tree as HTML into a [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) +Panggil `renderToReadableStream` untuk me-*render* pohon React Anda ke dalam [*Readable Web Stream*.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) ```js import { renderToReadableStream } from 'react-dom/server'; @@ -41,44 +41,44 @@ async function handler(request) { } ``` -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 ini.](#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* ke HTML. Contohnya, sebuah elemen JSX seperti ``. Diharapkan untuk mewakili keseluruhan dokumen, sehingga 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 klien, skrip *bootstrap* Anda harus [menghidrasi seluruh `dokumen` dengan panggilan ke `hydrateRoot`:](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -134,22 +134,22 @@ 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 listeners* ke HTML yang dihasilkan server dan membuatnya interaktif. -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### Membaca jalur aset CSS dan JS dari output *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 final (seperti file JavaScript dan CSS) sering kali di-*hash* setelah dibuat. Misalnya, alih-alih `styles.css` Anda mungkin berakhir dengan `styles.123456.css`. *Hashing* nama file aset statis menjamin bahwa setiap build berbeda dari aset yang sama akan memiliki nama file yang berbeda pula. Ini berguna karena memungkinkan Anda mengaktifkan *caching* jangka panjang dengan aman untuk aset statis: konten file dengan nama tertentu tidak akan pernah berubah. -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 setelah pembuatan, tidak ada cara bagi Anda untuk memasukkannya ke dalam kode sumber. Misalnya, *hardcoding* `"/styles.css"` ke dalam JSX seperti sebelumnya tidak akan berfungsi. Untuk menjauhkannya dari kode sumber Anda, komponen *root* Anda dapat membaca nama file asli dari *map* yang diteruskan sebagai *prop*: ```js {1,6} export default function App({ assetMap }) { return ( - My app + Aplikasiku ... @@ -158,10 +158,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +Di server, *render* `` dan teruskan `assetMap` Anda dengan 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 tooling build Anda, mis. membacanya dari keluaran build. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -177,10 +177,11 @@ async function handler(request) { } ``` -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*-nya dengan `assetMap` pada klien untuk menghindari error hidrasi. Anda dapat men-*serialize* dan meneruskan `assetMap` ke klien seperti ini: + ```js {9-10} -// You'd need to get this JSON from your build tooling. +// Anda perlu mendapatkan JSON ini dari tooling build Anda const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -188,7 +189,7 @@ const assetMap = { async function handler(request) { const stream = await renderToReadableStream(, { - // Careful: It's safe to stringify() this because this data isn't user-generated. + // Hati-hati: Aman untuk stringify() ini karena data ini tidak dibuat oleh pengguna. bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['/main.js']], }); @@ -198,7 +199,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `