From d8cb9a8f9f2caa018f700afe62d8e111ddcf12d7 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Tue, 29 Aug 2023 18:42:24 +0200 Subject: [PATCH 1/2] copy(renderToPipeableStream): first full translation --- .../server/renderToPipeableStream.md | 213 +++++++++--------- 1 file changed, 107 insertions(+), 106 deletions(-) diff --git a/src/content/reference/react-dom/server/renderToPipeableStream.md b/src/content/reference/react-dom/server/renderToPipeableStream.md index 6a9021e02..083981114 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` fait le rendu d'un arbre React dans un [flux Node.js](https://nodejs.org/api/stream.html) connectable. ```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. +Cette API est spécifique à Node.js. Les environnements dotés de [Web Streams](https://developer.mozilla.org/fr/docs/Web/API/Streams_API), tels que Deno ou les moteurs légers modernes, devraient plutôt utiliser [`renderToReadableStream`](/reference/react-dom/server/renderToReadableStream). --- -## Reference {/*reference*/} +## Référence {/*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) +Appelez `renderToPipeableStream` pour faire le rendu HTML d'un arbre React dans un [flux Node.js](https://nodejs.org/api/stream.html#writable-streams). ```js import { renderToPipeableStream } from 'react-dom/server'; @@ -40,47 +40,48 @@ const { pipe } = renderToPipeableStream(, { }); ``` -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 ``. It is expected to represent the entire document, so the `App` component should render the `` tag. +* `reactNode` : un nœud React dont vous souhaitez produire le HTML. Ça pourrait par exemple être un élément JSX tel que ``. C'est censé produire le document entier, de sorte que le composant `App` devrait produire la balise ``. -* **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) +Côté client, votre script de démarrage devrait [hydrater le `document` entier avec un appel à `hydrateRoot`](/reference/react-dom/client/hydrateRoot#hydrating-an-entire-document) : ```js [[1, 4, ""]] import { hydrateRoot } from 'react-dom/client'; @@ -133,15 +134,15 @@ import App from './App.js'; hydrateRoot(document, ); ``` -This will attach event listeners to the server-generated HTML and make it interactive. +Ça attachera les gestionnaires d'événements au HTML généré côté serveur pour le rendre interactif. -#### Reading CSS and JS asset paths from the build output {/*reading-css-and-js-asset-paths-from-the-build-output*/} +#### Lire les chemins de ressources CSS et JS depuis la sortie du *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. +Les URL finales de ressources (telles que les fichiers JavaScript et CSS) contiennent souvent une empreinte générée par le *build* Par exemple, plutôt que `styles.css`, vous pourriez vous retrouver avec `styles.123456.css`. L'injection d'empreinte dans les noms de fichiers des ressources statiques garantit que chaque nouveau *build* d'une même ressource aura un nom différent (si son contenu a changé). C'est pratique pour mettre en place sans danger des stratégies de cache à long terme pour les ressources statiques : un fichier avec un nom donné ne changera jamais de contenu. -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: +Seulement voilà, si vous ne connaissez pas les URL des ressources avant la fin du *build*, vous n'avez aucun moyen de les mettre dans votre code source. Par exemple, ça ne servirait à rien de coder en dur `"/styles.css"` dans votre JSX, comme dans le code vu plus haut. Pour garder les noms finaux hors de votre code source, votre composant racine peut lire les véritables noms depuis une table de correspondance qui lui serait passée en prop : ```js {1,6} export default function App({ assetMap }) { @@ -158,10 +159,10 @@ export default function App({ assetMap }) { } ``` -On the server, render `` and pass your `assetMap` with the asset URLs: +Côté serveur, faites le rendu de `` et passez-lui une `assetMap` avec les URL des ressources : ```js {1-5,8,9} -// You'd need to get this JSON from your build tooling, e.g. read it from the build output. +// Vous devrez récupérer ce JSON depuis votre outil de build, par exemple en lisant son affichage résultat. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -178,10 +179,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: +Dans la mesure où votre serveur fait désormais le rendu de ``, vous devez lui passer cette `assetMap` côté client aussi, pour éviter toute erreur lors de l'hydratation. Vous pouvez la sérialiser et la passer au client comme ceci : ```js {9-10} -// You'd need to get this JSON from your build tooling. +// Vous récupérereriez ce JSON depuis votre outil de build. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -189,7 +190,7 @@ const assetMap = { app.use('/', (request, response) => { const { pipe } = renderToPipeableStream(, { - // Careful: It's safe to stringify() this because this data isn't user-generated. + // Attention : on peut stringify() ça sans danger parce que ça ne vient pas des utilisateurs. bootstrapScriptContent: `window.assetMap = ${JSON.stringify(assetMap)};`, bootstrapScripts: [assetMap['main.js']], onShellReady() { @@ -200,7 +201,7 @@ app.use('/', (request, response) => { }); ``` -In the example above, the `bootstrapScriptContent` option adds an extra inline ` ``` @@ -161,8 +161,9 @@ export default function App({ assetMap }) { Côté serveur, faites le rendu de `` et passez-lui une `assetMap` avec les URL des ressources : -```js {1-5,8,9} -// Vous devrez récupérer ce JSON depuis votre outil de build, par exemple en lisant son affichage résultat. +```js {1-6,9-10} +// Vous devrez récupérer ce JSON depuis votre outil de build, +// par exemple en lisant son affichage résultat. const assetMap = { 'styles.css': '/styles.123456.css', 'main.js': '/main.123456.js' @@ -216,9 +217,9 @@ hydrateRoot(document, ); --- -### *Streamer* plus de contenu au fil du chargement {/*streaming-more-content-as-it-loads*/} +### Streamer plus de contenu au fil du chargement {/*streaming-more-content-as-it-loads*/} -Le *streaming* permet à l'utilisateur de commencer à voir votre contenu avant même que toutes les données soient chargées côté serveur. Imaginez par exemple une page de profil qui affiche une image de couverture, une barre latérale avec des ami·e·s et leurs photos, et une liste d'articles : +Le streaming permet à l'utilisateur de commencer à voir votre contenu avant même que toutes les données soient chargées côté serveur. Imaginez par exemple une page de profil qui affiche une image de couverture, une barre latérale avec des ami·e·s et leurs photos, et une liste d'articles : ```js function ProfilePage() { @@ -254,9 +255,9 @@ function ProfilePage() { } ``` -Ça demande à React de commencer à *streamer* le HTML avant que `Posts` ne charge ses données. React enverra dans un premier etmps le HTML du contenu de secours (`PostsGlimmer`) puis, quand `Posts` aura fini de charger ses données, React enverra le HTML restant ainsi qu'une balise `