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://thefaithnet-ynikfpghwu.now.sh/