Next.js: सर्वर `खतरनाक रूप से सेटइनरएचटीएमएल` का उपयोग करते समय ठीक से प्रस्तुत नहीं कर रहा है

पृष्ठभूमि

मैं एक सीएमएस के रूप में Prismic.io का उपयोग कर रहा हूं और इस डेटा को getInitialProps() में ला रहा हूं। सामग्री HTML के रूप में पूर्व-स्वरूपित है इसलिए मैं dangerouslySetInnerHTML का उपयोग कर रहा हूं।

अपेक्षित् व्यवहार

सर्वर और क्लाइंट पर निष्पादित होने पर render() का आउटपुट समान होता है।

वास्तविक व्यवहार

सर्वर पर render() का आउटपुट गलत है और क्लाइंट से मेल नहीं खाता है।

सर्वर से प्रस्तुत करना:

ग्राहक से प्रस्तुत करना

अंतर यह है कि सामग्री की सर्वर पर उचित शैली नहीं है क्योंकि 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://thefaithnet-ynikfpghwu.now.sh/