From 250c285dae5a2d378334014cc56be59065acbde8 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 28 Aug 2023 15:08:45 +0200 Subject: [PATCH 1/2] copy(renderToNodeStream): full first translation --- .../react-dom/server/renderToNodeStream.md | 39 ++++++++++--------- 1 file changed, 20 insertions(+), 19 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index a4ab2e570..62a33904d 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -4,13 +4,13 @@ title: renderToNodeStream -This API will be removed in a future major version of React. Use [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +Cette API sera retirée d'une future version majeure de React. Utilisez plutôt [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream). -`renderToNodeStream` renders a React tree to a [Node.js Readable Stream.](https://nodejs.org/api/stream.html#readable-streams) +`renderToNodeStream` fait le rendu d'un arbre React dans un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams). ```js const stream = renderToNodeStream(reactNode) @@ -22,11 +22,11 @@ const stream = renderToNodeStream(reactNode) --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `renderToNodeStream(reactNode)` {/*rendertonodestream*/} -On the server, call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe into the response. +Côté serveur, appelez `renderToNodeStream` pour obtenir un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams) que vous pouvez connecter *(pipe, NdT)* vers la réponse. ```js import { renderToNodeStream } from 'react-dom/server'; @@ -35,42 +35,43 @@ const stream = renderToNodeStream(); stream.pipe(response); ``` -On the client, call [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) to make the server-generated HTML interactive. +Côté client, appelez [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) pour rendre interactif ce HTML généré côté serveur. -[See more examples below.](#usage) +[Voir d'autres exemples ci-dessous](#usage). -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `reactNode`: A React node you want to render to HTML. For example, a JSX element like ``. +* `reactNode` : un nœud React dont vous souhaitez produire le HTML. Par exemple, un élément JSX tel que ``. -#### Returns {/*returns*/} +#### Valeur renvoyée {/*returns*/} -A [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) that outputs an HTML string. +Un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams) qui produit le texte HTML. -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -* This method will wait for all [Suspense boundaries](/reference/react/Suspense) to complete before returning any output. +* Cette méthode attendra que toutes les [frontières Suspense](/reference/react/Suspense) aboutissent avant de commencer à produire le moindre rendu. -* As of React 18, this method buffers all of its output, so it doesn't actually provide any streaming benefits. This is why it's recommended that you migrate to [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream) instead. +* À partir de React 18, cette méthode utilise un tampon pour l'ensemble de sa production, de sorte qu'elle n'a aucun des avantages du *streaming*. C'est pourquoi nous vous conseillons de plutôt migrer vers [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream). -* The returned stream is a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +* Le flux renvoyé est encodé en UTF-8. Si vous avez besoin d'un flux avec un autre encodage, regardez les projets tels qu'[iconv-lite](https://www.npmjs.com/package/iconv-lite), qui fournissent des flux de transformation pour le transcodage de textes. --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Rendering a React tree as HTML to a Node.js Readable Stream {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} +### Produire le HTML d'un arbre React sous forme d'un flux Node.js en lecture {/*rendering-a-react-tree-as-html-to-a-nodejs-readable-stream*/} -Call `renderToNodeStream` to get a [Node.js Readable Stream](https://nodejs.org/api/stream.html#readable-streams) which you can pipe to your server response: +Appelez `renderToNodeStream` pour obtenir un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams) que vous pouvez connecter *(pipe, NdT)* vers la réponse : ```js {5-6} import { renderToNodeStream } from 'react-dom/server'; -// The route handler syntax depends on your backend framework +// La syntaxe du gestionnaire de route dépend de votre +// framework côté serveur app.use('/', (request, response) => { const stream = renderToNodeStream(); stream.pipe(response); }); ``` -The stream 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. +Le flux produira le HTML initial, non interactif, de vos composants React. Côté client, vous aurez besoin d'appeler [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) pour *hydrater* ce HTML généré côté serveur et le rendre interactif. From 8c7478493e76d4b8968e3f33e56ce57fda1b7fb1 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 28 Aug 2023 15:10:59 +0200 Subject: [PATCH 2/2] copy(renderToNodeStream): final review pass --- TRANSLATORS.md | 1 + src/content/reference/react-dom/server/renderToNodeStream.md | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/TRANSLATORS.md b/TRANSLATORS.md index 8b381e243..ee0395cf8 100644 --- a/TRANSLATORS.md +++ b/TRANSLATORS.md @@ -105,6 +105,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis
  • createRoot
  • hydrateRoot
  • API React DOM côté serveur (accueil chapitre)
    • +
  • renderToNodeStream
  • renderToStaticMarkup
  • renderToStaticNodeStream
  • API React historique
    • diff --git a/src/content/reference/react-dom/server/renderToNodeStream.md b/src/content/reference/react-dom/server/renderToNodeStream.md index 62a33904d..b96e0d4b2 100644 --- a/src/content/reference/react-dom/server/renderToNodeStream.md +++ b/src/content/reference/react-dom/server/renderToNodeStream.md @@ -41,7 +41,7 @@ Côté client, appelez [`hydrateRoot`](/reference/react-dom/client/hydrateRoot) #### Paramètres {/*parameters*/} -* `reactNode` : un nœud React dont vous souhaitez produire le HTML. Par exemple, un élément JSX tel que ``. +* `reactNode` : un nœud React dont vous souhaitez produire le HTML. Ça pourrait par exemple être un élément JSX tel que ``. #### Valeur renvoyée {/*returns*/} @@ -51,7 +51,7 @@ Un [flux Node.js en lecture](https://nodejs.org/api/stream.html#readable-streams * Cette méthode attendra que toutes les [frontières Suspense](/reference/react/Suspense) aboutissent avant de commencer à produire le moindre rendu. -* À partir de React 18, cette méthode utilise un tampon pour l'ensemble de sa production, de sorte qu'elle n'a aucun des avantages du *streaming*. C'est pourquoi nous vous conseillons de plutôt migrer vers [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream). +* À partir de React 18, cette méthode utilise un tampon pour l'ensemble de sa production, de sorte qu'elle n'a aucun des avantages du *streaming*. C'est pourquoi nous vous conseillons plutôt de migrer vers [`renderToPipeableStream`](/reference/react-dom/server/renderToPipeableStream). * Le flux renvoyé est encodé en UTF-8. Si vous avez besoin d'un flux avec un autre encodage, regardez les projets tels qu'[iconv-lite](https://www.npmjs.com/package/iconv-lite), qui fournissent des flux de transformation pour le transcodage de textes.