Next.js: El servidor no se procesa correctamente cuando se usa `dangerouslySetInnerHTML`

Creado en 5 nov. 2016  ·  3Comentarios  ·  Fuente: vercel/next.js

Fondo

Estoy usando Prismic.io como CMS y obtengo estos datos en getInitialProps() . El contenido está preformateado como HTML, por lo que estoy usando dangerouslySetInnerHTML .

Comportamiento esperado

La salida de render() es idéntica cuando se ejecuta en el servidor y en el cliente.

Comportamiento real

La salida de render() en el servidor es incorrecta y no coincide con el cliente.

Renderizar desde el servidor:

image

Render del cliente

image

La diferencia es que el contenido no tiene el estilo adecuado en el servidor porque los nodos DOM no están anidados correctamente.

DOM del servidor:

image

DOM del cliente:

image

Código relevante

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

y

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

Más información

Esta implementación y /_src son públicos aquí: https://thefaithnet-ynikfpghwu.now.sh/

Comentario más útil

@flybayer gracias por informar. Podría estar equivocado, pero pasar tu sith a través de un validador de HTML me da este error https: //validator.w3.org/nu/? Doc = https% 3A% 2F% 2Fthefaithnet-ynikfpghwu.now.sh% 2F Creo que es porque en HTML, las etiquetas p no son válidas. ¿Puedes intentar usar un div en lugar del p externo?

Todos 3 comentarios

@flybayer gracias por informar. Podría estar equivocado, pero pasar tu sith a través de un validador de HTML me da este error https: //validator.w3.org/nu/? Doc = https% 3A% 2F% 2Fthefaithnet-ynikfpghwu.now.sh% 2F Creo que es porque en HTML, las etiquetas p no son válidas. ¿Puedes intentar usar un div en lugar del p externo?

@impronunciable ¡ Guau, eso fue todo!

¡Buen partido y muchas gracias por tu ayuda!

¡Me alegro de que haya funcionado!

El domingo 6 de noviembre de 2016 a las 11:57 a.m. Brandon Bayer [email protected]
escribió:

@impronunciable https://github.com/impronunciable ¡ Vaya, eso fue todo!

¡Buen partido y muchas gracias por tu ayuda!

-
Recibes esto porque te mencionaron.

Responda a este correo electrónico directamente, véalo en GitHub
https://github.com/zeit/next.js/issues/213#issuecomment -258693902, o silenciar
la amenaza
https://github.com/notifications/unsubscribe-auth/AAKHp5EvRuw2GOjOViKL0MjKr0Vrt65sks5q7gbtgaJpZM4KqaPT
.

¿Fue útil esta página
0 / 5 - 0 calificaciones