Next.js: Le serveur ne s'affiche pas correctement lors de l'utilisation de `dangerouslySetInnerHTML`

Fond

J'utilise Prismic.io comme CMS et je récupère ces données dans getInitialProps() . Le contenu est préformaté en HTML, j'utilise donc dangerouslySetInnerHTML .

Comportement prévisible

La sortie de render() est identique lorsqu'elle est exécutée sur le serveur et sur le client.

Comportement réel

La sortie de render() sur le serveur est erronée et ne correspond pas au client.

Rendu depuis le serveur :

Rendu du client

La différence est que le contenu n'a pas le bon style sur le serveur car les nœuds DOM ne sont pas correctement imbriqués.

DOM du serveur :

DOM du client :

Code pertinent

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

et

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

Plus d'informations

Ce déploiement et /_src sont publics ici : https://thefaithnet-ynikfpghwu.now.sh/