renderToNodeStream

const stream = renderToNodeStream(reactNode)

• Référence
  • renderToNodeStream(reactNode)
• Utilisation
  • Produire le HTML d’un arbre React sous forme d’un flux Node.js en lecture

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 />.

• options optionnelles : un objet avec des options pour le rendu côté serveur.

  • identifierPrefix optionnel : un préfixe textuel utilisé pour les ID générés par useId. Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page. Doit être le même préfixe que celui passé àhydrateRoot.

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.