dangerouslySetInnerHTML does not render server side with getStaticProps

[ofernando97]

Hey folks, I've been struggling with an issue which I'm not sure if it is the expected behavior.
When I inject HTML using dangerouslySetInnerHTML and when I go to view source in the browser, the HTML element is empty although it is displayed properly in the UI. Can anyone please confirm if I dangerouslySetInnerHTML , that is it not rendered server-side ?

<div class="content"></div>

[TommySorensen]

dangerouslySetInnerHTML is set on server-side also. It could be as simple as your data or a if statement before the dangerouslySetInnerHTML is not available true on server-side? Is your data only available after useEffect?

[ofernando97]

@TommySorensen I am pre-rendering the pages using getStaticProps and getStaticPaths so it is available on server-side.
I set the prop to the state and then render it.

export default function Post(props) { const [post, setPost] = useState(props.post)

So if i render the content as <div> {post.data.content} </div> it can be seen if go to view source, but if do this <div dangerouslySetInnerHTML={{__html: post.data.content)}}/>, the content does not show up when i go to view source

[ofernando97]

I think i figured it out, rather than assigning the data to state directly from props, destructuring the props as export default function Post({post}) worked.

[Phryxia]

Note that this comment doesn't related to original author's situation. I just write it because I've lost for similar issue.

Anybody who experience this pheonmena must check the HTML content when host element is <p>. It seems that there is #an issue related to Next.js' SSR. when paragraph exists inside of <p> during SSR, Next.js seems to refuse rendering and just spam ''.

const someHtml = '<p>blah</p>'

return (
  <p dangerouslySetInnerHTML={{ __html: someHtml }}
)

Note that <p> inside <p> is not valid heathy HTML structure. #see this

[mikekrell]

Saved me a lot of time! Thank you.

[BenBestmann]

Thanks, this worked!

[NickRoux]

Thank you. p-tag inside a p-tag was exactly it. I was rendering a Quill content and ofc had some p-tag's in it

[Noushad-web]

Thanks, It worked for me too. In my case I have converted the wrapper element to <div> instead of <p>.

[alcatraz627]

Thanks. This helped. Replace p with div.