From e2cf6b58be5dccfd7239d7049b567f09b875b6f0 Mon Sep 17 00:00:00 2001 From: Nivaldo Farias Date: Mon, 20 Jan 2025 16:58:22 -0300 Subject: [PATCH] Translate `renderToReadableStream.md` to pt-br --- .../server/renderToReadableStream.md | 181 +++++++++--------- 1 file changed, 89 insertions(+), 92 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToReadableStream.md b/src/content/reference/react-dom/server/renderToReadableStream.md index f407f2245..c98f36f59 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` renderiza uma árvore React em um [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) ```js const stream = await renderToReadableStream(reactNode, options?) @@ -16,7 +16,7 @@ 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. +Esta API depende de [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API) Para Node.js, use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) em vez disso. @@ -26,7 +26,7 @@ This API depends on [Web Streams.](https://developer.mozilla.org/en-US/docs/Web/ ### `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) +Chame `renderToReadableStream` para renderizar sua árvore React como HTML em um [Readable Web Stream.](https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream) ```js import { renderToReadableStream } from 'react-dom/server'; @@ -41,36 +41,36 @@ async function handler(request) { } ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +No cliente, chame [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) para tornar o HTML gerado pelo servidor interativo. -[See more examples below.](#usage) +[Veja mais exemplos abaixo.](#usage) #### Parameters {/*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`: Um nó React que você quer renderizar como HTML. Por exemplo, um elemento JSX como ``. Espera-se que represente o documento inteiro, portanto, o componente `App` deve renderizar a 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) +No cliente, seu script de bootstrap deve [hidratar todo o `document` com uma chamada para `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. +Isso anexará manipuladores de eventos ao HTML gerado pelo servidor e tornará interativo. #### Reading CSS and JS asset paths from the build output {/*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. +Os URLs finais dos ativos (como arquivos JavaScript e CSS) geralmente são hashados após a construção. Por exemplo, em vez de `styles.css` você pode acabar com `styles.123456.css`. Hashing os nomes de arquivos de ativos estáticos garante que cada construção distinta do mesmo ativo terá um nome de arquivo diferente. Isso é útil porque permite ativar com segurança o cache de longo prazo para ativos estáticos: um arquivo com um certo nome nunca mudaria de conteúdo. -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: +No entanto, se você não souber os URLs dos ativos até após a construção, não há como colocá-los no código-fonte. Por exemplo, codificar `"/styles.css"` em JSX como antes não funcionaria. Para mantê-los fora do seu código-fonte, seu componente raiz pode ler os nomes reais dos arquivos de um mapa passado como prop: ```js {1,6} export default function App({ assetMap }) { return ( - My app + Meu app ... @@ -158,10 +158,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +No servidor, renderize `` e passe seu `assetMap` com os URLs dos ativos: ```js {1-5,8,9} -// You'd need to get this JSON from your build tooling, e.g. read it from the build output. +// Você precisaria obter esse JSON da sua ferramenta de construção, por exemplo, ler do resultado da construção. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -177,10 +177,10 @@ 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: +Como seu servidor agora está renderizando ``, você precisa renderizá-lo com `assetMap` no cliente também para evitar erros de hidratação. Você pode serializar e passar `assetMap` para o cliente assim: ```js {9-10} -// You'd need to get this JSON from your build tooling. +// Você precisaria obter esse JSON da sua ferramenta de construção. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -188,7 +188,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. + // Cuidado: É seguro usar stringify() porque esses dados não são gerados pelo usuário. bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['/main.js']], }); @@ -198,7 +198,7 @@ async function handler(request) { } ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline `