renderToNodeStream
renderToNodeStream
fait le rendu d’un arbre React dans un flux Node.js en lecture.
const stream = renderToNodeStream(reactNode)
Référence
renderToNodeStream(reactNode)
Côté serveur, appelez renderToNodeStream
pour obtenir un flux Node.js en lecture que vous pouvez connecter (pipe, NdT) vers la réponse.
import { renderToNodeStream } from 'react-dom/server';
const stream = renderToNodeStream(<App />);
stream.pipe(response);
Côté client, appelez hydrateRoot
pour rendre interactif ce HTML généré côté serveur.
Voir d’autres exemples ci-dessous.
Paramètres
reactNode
: un nœud React dont vous souhaitez produire le HTML. Ça pourrait par exemple être un élément JSX tel que<App />
.
Valeur renvoyée
Un flux Node.js en lecture qui produit le texte HTML.
Limitations
-
Cette méthode attendra que toutes les périmètres 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 plutôt de migrer vers
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, qui fournissent des flux de transformation pour le transcodage de textes.
Utilisation
Produire le HTML d’un arbre React sous forme d’un flux Node.js en lecture
Appelez renderToNodeStream
pour obtenir un flux Node.js en lecture que vous pouvez connecter (pipe, NdT) vers la réponse :
import { renderToNodeStream } from 'react-dom/server';
// La syntaxe du gestionnaire de route dépend de votre
// framework côté serveur
app.use('/', (request, response) => {
const stream = renderToNodeStream(<App />);
stream.pipe(response);
});
Le flux produira le HTML initial, non interactif, de vos composants React. Côté client, vous aurez besoin d’appeler hydrateRoot
pour hydrater ce HTML généré côté serveur et le rendre interactif.