Динамическое отображение внешних компонентов HTML / React в React

Можно ли взять содержимое HTML / JSX из внешнего источника и динамически отображать его в React? В нашем случае мы хотим взять контент из Wordpress API и отобразить его как на клиенте, так и на сервере (мы используем NextJS).

Итак, API Wordpress возвращает ответ JSON, который включает свойство содержимого, которое представляет собой строку HTML / JSX. содержимое будет выглядеть примерно так.

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

Итак, как вы можете видеть, это будет смесь компонентов HTML и React / JSX, представленная в виде строки

Я бы использовал Axios, чтобы сделать вызов для получения контента (как на сервере, так и на клиенте с использованием метода NextJS getInitialProps ()), затем мне нужно его отрендерить, но я новичок в реакции и вижу пару проблем.

1) В React JSX компилируется во время сборки, а не во время выполнения, я не вижу, как это обойти (это было бы легко в Angular, используя, например, службу $ compile).

2) Поскольку мы не знаем, какие компоненты будет использовать контент из Wordpress, нам придется импортировать каждый из них в верхней части страницы, контент может включать компонент или он может включать компонент, кто знает?.

Прямо сейчас я думаю, что это невозможно, а это значит, что нам придется пересмотреть использование React, но я очень надеюсь, что у кого-то есть ответ.

Любая помощь будет оценена по достоинству.