renderToStaticMarkup

const html = renderToStaticMarkup(reactNode)

• Référence
  • renderToStaticMarkup(reactNode)
• Utilisation
  • Produire le HTML non interactif d’un arbre React

Référence

renderToStaticMarkup(reactNode)

Côté serveur, appelez renderToStaticMarkup pour produire le HTML de votre appli.

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

const html = renderToStaticMarkup(<Page />);

Elle renverra le HTML non interactif de vos composants React.

Voir d’autres exemples ci-dessous.

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

Une chaîne de caractères HTML.

Limitations

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

• renderToStaticMarkup ne prend que partiellement en charge Suspense. Si un composant suspend, renderToStaticMarkup utilisera immédiatement le HTML de son contenu de secours.

• renderToStaticMarkup fonctionne dans un navigateur, mais il est déconseillé de l’utiliser dans du code client. Si vous devez obtenir le HTML d’un composant dans un navigateur, récupérez le HTML de son rendu dans un nœud DOM.

Utilisation

Produire le HTML non interactif d’un arbre React

Appelez renderToStaticMarkup pour produire le HTML de votre appli, que vous pourrez alors renvoyer dans votre réponse serveur :

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

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

Ça produira le HTML initial, non interactif, de vos composants React.