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.
Consulting
Si vous recherchez des solutions à un problème ou avez besoin de conseils, je suis là pour vous aider ! N'hésitez pas à réserver un call avec moi pour une session de consulting personnalisée. Discutons de votre situation et trouvons ensemble la meilleure solution à implémenter.
Articles sur le même sujet
Etendre le type Window avec Typescript
Certaine des propriétés et fonctions du type Window avec Typescript, ne sont pas disponibles. Ce post a pour but d'expliquer comme étendre le type Window avec les propriétés manquantes.
Etendre le type Window avec Typescript
Certaine des propriétés et fonctions du type Window avec Typescript, ne sont pas disponibles. Ce post a pour but d'expliquer comme étendre le type Window avec les propriétés manquantes.
Starter Gatsby + Netlify CMS + TailwindCSS
Avec le nombre de sites web generés avec les mêmes outils, j'essaie au maximum de mutualiser l'effort de maintenance de la stack technique commune. Suivant ce principe, je viens de créer un starter qui vient du développement de mes autres sites.
Articles mis en avant
MySQL Docker Image pour les Mac ARM M1
Le problème avec les Apple M1 et les Apple M2 est que de nombreux logiciels ne sont encore pas compatible avec la microarchitecture ARMv8 comme les images officielles Docker pour MySQL par exemple.
Comment activer la vérification de typage pour Python dans VSCode
Python supporte désormais le [type hints](https://docs.python.org/3/library/typing.html). Dans cet article, nous allons voir comment avoir de l'IntelliSense pour le typage ainsi qu'avoir les erreurs de typage sur Visual Studio Code.
Comment gérer l'internationalisation avec NextJS SSG
Générer statiquement un site avec le framework NextJS pour différentes langues n'est pas si simple.