在gatsby中进行渲染之前，构造来自wordpress的页面的最佳方法是什么？

Question

我正在使用Gatsby并从WordPress采购内容。而不是使用类似以下内容立即显示内容：

  render() {
    const currentPage = this.props.data.wordpressPage;

    return (
      <Layout>
        <h1 dangerouslySetInnerHTML={{ __html: currentPage.title }} />
        <div dangerouslySetInnerHTML={{ __html: currentPage.content }} />
      </Layout>
    )
  }

...我正在做类似的事情：

render() {

            if (typeof document !== `undefined`) {

            const homePage = this.props.data.wordpressPage;

            const page = document.createElement('div');
            page.innerHTML = homePage.content.trim();

            // build gallery
            let slidesDom = page.querySelectorAll(".slide");
            let slides = [];

            slidesDom.forEach(slide => {
                slides.push({
                    img: slide.querySelector("img").src,
                    title: slide.querySelector(".title").innerText,
                    description: slide.querySelector(".description").innerText
                });
            }); 
...

            const content =
                <Layout id="index">
                    <Banner1
                        id="Slides"
                        key="Slides"
                        slides={slides}
                    />
                    <About
                        id="Teams0_0"
                        key="Teams0_0"
                        img={nikAboutImg.src}
                        title='Hi'
                        content={niktAboutContent}
                        isMobile={this.state.isMobile}
                    />
                    {offers}
                    {event}
                    {blog}
                    <Insta />
                </Layout>;

            return (
                <div>{content}</div>
            );

我正在做的是按类或id从标记的容器中检索所需的特定数据，然后创建所需的结构。

我想知道你们将如何处理这个问题。由于我目前的解决方案对我来说似乎有点复杂且效率低下。

谢谢。 最好的问候。