renderToStaticNodeStream

const stream = renderToStaticNodeStream(reactNode)

• Référence
  • renderToStaticNodeStream(reactNode)
• Utilisation
  • Produire le HTML statique d’un arbre React dans un flux Node.js en lecture

Référence

renderToStaticNodeStream(reactNode)

Côté serveur, appelez renderToStaticNodeStream pour obtenir un flux Node.js en lecture.

import { renderToStaticNodeStream } from 'react-dom/server';

const stream = renderToStaticNodeStream(<Page />);
stream.pipe(response);

Voir d’autres exemples ci-dessous.

Le flux émettra le HTML non interactif de vos composants React.

Paramètres

• reactNode : un nœud React dont vous voulez obtenir le HTML. Ça pourrait par exemple être un nœud JSX tel que <Page />.
• 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.

Valeur renvoyée

Un flux Node.js en lecture qui émet le texte HTML. Le HTML obtenu ne peut pas être hydraté côté client.

Limitations

• Le résultat de renderToStaticNodeStream ne peut pas être hydraté.

• Cette méthode attendra que tous les périmètres Suspense aboutissent avant de renvoyer quelque contenu que ce soit.

• À partir de React 18, cette méthode met en tampon toute sa sortie, elle n’a donc pas à proprement parler les avantages du streaming.

• 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 statique d’un arbre React dans un flux Node.js en lecture

Appelez renderToStaticNodeStream pour obtenir un flux Node.js en lecture que vous pourrez connecter (pipe, NdT) à votre réponse serveur :

import { renderToStaticNodeStream } from 'react-dom/server';

// La syntaxe du gestionnaire de routes dépend de votre framework côté serveur
app.use('/', (request, response) => {
  const stream = renderToStaticNodeStream(<Page />);
  stream.pipe(response);
});

Le flux produira le HTML initial, non interactif, de vos composants React.