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

[flybayer]

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/

[impronunciable]

@flybayer thanks for reporting. I could be wrong but passing your sith through an HTML validator gives me this errorhttps://validator.w3.org/nu/?doc=https%3A%2F%2Fthefaithnet-ynikfpghwu.now.sh%2F I think is because in HTML nesting p tags is not valid. Can you try using a div instead of the outer p?

[flybayer]

@impronunciable Wow, that was it!

Good catch, and thank you so much for your help!

[impronunciable]

Glad it worked!

On Sun, Nov 6, 2016, 11:57 AM Brandon Bayer [email protected]
wrote:

@impronunciable https://github.com/impronunciable Wow, that was it!

Good catch, and thank you so much for your help!

—
You are receiving this because you were mentioned.

Reply to this email directly, view it on GitHub
https://github.com/zeit/next.js/issues/213#issuecomment-258693902, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAKHp5EvRuw2GOjOViKL0MjKr0Vrt65sks5q7gbtgaJpZM4KqaPT
.