¿Es posible tomar contenido HTML / JSX de una fuente externa y renderizarlo dinámicamente en React? En nuestro caso, queremos tomar contenido de la API de Wordpress y representarlo tanto en el cliente como en el servidor (estamos usando NextJS)

Entonces, la API de Wordpress devuelve una respuesta JSON que incluye una propiedad de contenido que es una cadena de HTML / JSX. el contenido se vería así.

{
    content: "<div><Slider imageCount="5" galleryID="1"></Slider><span>This is an image gallery</span></div>"
}

Entonces, como puede ver, sería una mezcla de HTML y React components / JSX, representada como una cadena

Usaría Axios para hacer una llamada para obtener el contenido (tanto en el servidor como en el cliente usando el método getInitialProps () de NextJS), luego necesito renderizarlo, pero soy nuevo para reaccionar y puedo ver un par de problemas. @

1) En React, JSX se compila en el momento de la compilación, no en el tiempo de ejecución, no puedo ver cómo solucionar esto (habría sido fácil en Angular usando el servicio de compilación de $, por ejemplo).

2) Como no sabemos qué componentes utilizará el contenido de Wordpress, tendríamos que importar cada uno de ellos en la parte superior de la página, el contenido puede incluir un componente o un componente , ¿quién sabe?

Ahora mismo, creo que esto no es posible, lo que significaría que tendríamos que reconsiderar el uso de React, pero realmente espero que alguien tenga una respuesta.

Cualquier ayuda sería realmente apreciada.