É possível pegar o conteúdo HTML / JSX de uma fonte externa e renderizá-lo dinamicamente no React? No nosso caso, queremos pegar o conteúdo da API do Wordpress e renderizá-lo no cliente e no servidor (estamos usando o NextJS)

Portanto, a API do Wordpress retorna uma resposta JSON que inclui uma propriedade de conteúdo que é uma sequência de HTML / JSX. o conteúdo seria algo parecido com isto.

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

Então, como você pode ver, seria uma mistura de componentes HTML e React / JSX, representados como uma sequência

Eu usaria o Axios para fazer uma chamada para obter o conteúdo (no servidor e no cliente, usando o método getInitialProps () do NextJS), então eu preciso renderizá-lo, mas sou novo em reagir e vejo alguns problemas.

1) No React, o JSX é compilado no tempo de compilação, não no tempo de execução, não consigo ver como contornar isso (teria sido fácil no Angular usar o serviço de compilação $ por exemplo).

2) Como não sabemos quais componentes o conteúdo do Wordpress vai usar, teríamos que importar cada um deles na parte superior da página, o conteúdo pode incluir um componente ou pode incluir um componente, quem sabe?.

No momento, estou pensando que isso não é possível, o que significaria que teríamos que reconsiderar o uso do React, mas realmente espero que alguém tenha uma resposta.

Qualquer ajuda seria realmente apreciada.