how to deduplicate structured data when using dangerouslySetInnerHTML without breaking the seo?

[IsKaros]

Summary

how to reproduce
1.first enter the page using dangerouslySetInnerHTML to generate structured data
2.disable cache and refresh the page
3.open the element tab or using plugins to see the structured data

haven't anyone see the problem before ? Is there any solution pls ?

Additional information

No response

Example

No response

[icyJoseph]

Share some pseudo-code of what you are doing, or better yet a repository.

[IsKaros]

would that be relevant to the hydration error since it mentioned "regenerated on the client" ?

[icyJoseph]

Yes that's likely the problem, in your machine, but I don't get it myself. Are you able to see this issue in incognito mode? I wonder if you have a browser extension that's introducing the hydration error.

[IsKaros]

I can still reproduce the problem in incognito mode.I check the code pointed out by the error, i think the faq code for seo purpose written by our operation colleague is a bit wired.

we use tag 'p' as a container for the code written for seo. As i know, there are some restriction of tag nesting in nextjs , but the doc doesn't mention h3 can not be nested(sorry for i barely using p tag)。I suspect the nesting code a bit.

[icyJoseph]

AHa yeah HTML is kind of forgiving, but not... like you can't nest p tags in server sent HTML at least, and yeah in general weird things may happen when the browser HTML parser re-orders the HTML into a valid shape.

It is not Next.js making decisions about this btw, React does some validation, but it is not complete, acknowledged in the source code of React. Since you are sending invalid HTML in the dangerouslySetInnerHTML bit, all guards are off - the browser parser re-arranges the HTML and React runs into hydration issues, possibly leading duplicate nodes, or nodes in unexpected places.

See here, I did this in a codepen project. Notice the output is not what you'd expect. This tool is also useful to find some of these issues: https://caninclude.onrender.com/caninclude?child=h3&parent=p

[IsKaros]

I find the solution to the problem thanks to your support.I will just mark your reply as answer and close the issue i just put forward a few days ago.Btw, it would be nicer if the tool caninclude or something like that can be mentioned in the link https://nextjs.org/docs/messages/react-hydration-error.