Next.js: Server tidak merender dengan benar saat menggunakan `dangerouslySetInnerHTML`

Latar belakang

Saya menggunakan Prismic.io sebagai CMS dan saya mengambil data ini dalam getInitialProps() . Konten sudah diformat sebelumnya sebagai HTML jadi saya menggunakan dangerouslySetInnerHTML .

Perilaku yang Diharapkan

Output dari render() identik ketika dijalankan di server dan di klien.

Perilaku Sebenarnya

Output render() di server salah dan tidak cocok dengan klien.

Render dari server:

Render dari klien

Perbedaannya adalah konten tidak memiliki gaya yang tepat di server karena node DOM tidak bersarang dengan benar.

DOM dari server:

DOM dari klien:

Kode yang relevan

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

dan

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>
)

Info lebih lanjut

Penerapan ini dan /_src bersifat publik di sini: https://thefaithnet-ynikfpghwu.now.sh/