Next.js: O servidor não renderiza corretamente ao usar `hazouslySetInnerHTML`

Criado em 5 nov. 2016  ·  3Comentários  ·  Fonte: vercel/next.js

Fundo

Estou usando Prismic.io como um CMS e estou buscando esses dados em getInitialProps() . O conteúdo é pré-formatado como HTML, então estou usando dangerouslySetInnerHTML .

Comportamento esperado

A saída de render() é idêntica quando executada no servidor e no cliente.

Comportamento Real

A saída de render() no servidor está errada e não corresponde ao cliente.

Renderizar do servidor:

image

Renderizar do cliente

image

A diferença é que o conteúdo não tem o estilo adequado no servidor porque os nós DOM não estão aninhados corretamente.

DOM do servidor:

image

DOM do cliente:

image

Código Relevante

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

e

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

Mais informações

Esta implantação e /_src são públicos aqui: https://thefaithnet-ynikfpghwu.now.sh/

Comentários muito úteis

@flybayer, obrigado por reportar. Posso estar errado, mas passar seu sith por um validador de HTML me dá este e rrorhttps: //validator.w3.org/nu/? Doc = https% 3A% 2F% 2Fthefaithnet-ynikfpghwu.now.sh% 2F Acho que é porque no aninhamento de HTML p tags p externo?

Todos 3 comentários

@flybayer, obrigado por reportar. Posso estar errado, mas passar seu sith por um validador de HTML me dá este e rrorhttps: //validator.w3.org/nu/? Doc = https% 3A% 2F% 2Fthefaithnet-ynikfpghwu.now.sh% 2F Acho que é porque no aninhamento de HTML p tags p externo?

@impronunciable Uau, era isso!

Boa captura e muito obrigado pela ajuda!

Ainda bem que funcionou!

No domingo, 6 de novembro de 2016, 11h57, Brandon Bayer [email protected]
escreveu:

@impronunciable https://github.com/impronunciable Uau, era isso!

Boa captura e muito obrigado pela ajuda!

-
Você está recebendo isso porque foi mencionado.

Responda a este e-mail diretamente, visualize-o no GitHub
https://github.com/zeit/next.js/issues/213#issuecomment -258693902 ou mudo
o segmento
https://github.com/notifications/unsubscribe-auth/AAKHp5EvRuw2GOjOViKL0MjKr0Vrt65sks5q7gbtgaJpZM4KqaPT
.

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

YarivGilad picture YarivGilad  ·  3Comentários

timneutkens picture timneutkens  ·  3Comentários

wagerfield picture wagerfield  ·  3Comentários

havefive picture havefive  ·  3Comentários

nhanco picture nhanco  ·  3Comentários