Next.js: 使用 `dangerouslySetInnerHTML` 时服务器无法正确呈现

背景

我使用Prismic.io作为 CMS 并在getInitialProps()获取这些数据。 内容已预先格式化为 HTML，因此我使用的是dangerouslySetInnerHTML 。

预期行为

在服务器和客户端上执行时， render()的输出是相同的。

实际行为

render()在服务器端输出错误，与客户端不匹配。

从服务器渲染：

从客户端渲染

不同之处在于内容在服务器上没有正确的样式，因为 DOM 节点没有正确嵌套。

来自服务器的 DOM：

来自客户端的 DOM：

相关代码

const htmlFor = (type) => ({__html: this.props[type]})
<Article heading="Devotional" html={true} >
   {htmlFor('devotional')}
</Article>

和

const Article = ({heading, children, date, link, style, html}) => (
  <article
    className="mv3 mv4-m mv5-l measure"
    style={style}
  >
    <header>
      <h1 className="f3 f2-ns mt0 lh-title i garamond bb bw3 b--gold">
        {heading}
      </h1>
    </header>
    { html
      ? <p className="lh-copy" dangerouslySetInnerHTML={children} />
      : <p className="lh-copy" >{children}</p>
    }

    <footer>
      { date
        ? <p className="f6 i">{date}</p>
        : null
      }
      {link
        ? <a href="#" className='link dim mid-gray bb b--gold'>
            {link}
          </a>
        : null
      }
    </footer>
  </article>
)

更多信息

此部署和/_src在此处公开： https :