Comment récupérer la chaine de charactères HTML d'un composant React

Emmanuel Gautier / May 02, 2021

1 min read

Dans plusieurs cas, vous pourriez avoir besoin d'avoir la chaine de charactères représentant le HTML généré plutôt que le composant React.

Le moyen le plus simple est d'utiliser la fonction renderToString du package react-dom :

import { renderToString } from 'react-dom/server'

renderToString(<YourAwesomeComponent props1="value1" props2={{ value: '2' }} />)

La fonction renderToString peut être utilisée côté serveur et côté client.

Si vous souhaitez rendre l'ensemble de la page pour des raisons SEO ou d'UX par exemple, vous pouvez également utiliser la fonction renderToNodeStream pour améliorer le temps de chargement de la page.

Plus d'informations sur la documentation de React.