Next.js: Server not rendering properly when using `dangerouslySetInnerHTML`

Background

I'm using Prismic.io as a CMS and am fetching this data in getInitialProps(). The content is pre-formatted as HTML so I'm using dangerouslySetInnerHTML.

Expected Behavior

The output of render() is identical when executed on the server and on the client.

Actual Behavior

The output of render() on the server is wrong and doesn't match the client.

Render from server:

Render from client

The difference is the content doesn't have the proper style on the server because the DOM nodes are not nested properly.

DOM from the server:

DOM from the client:

Relevant Code

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

and

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

More Info

This deployment and /_src are public here: https://thefaithnet-ynikfpghwu.now.sh/