Duplicate Text Issue: Why is the h1 Tag Content Repeated in JavaScript Code on My Website?
Unanswered
American black bear posted this in #help-forum
American black bearOP
When I view the page source of my website through the browser, I notice that the same text is repeated twice. For instance, the value of my h1 tag is "5 Reasons Why Short URLs Are Better Than Long URLs," but I see the same text repeated in the JavaScript code. Can you explain why this is happening?
5 Replies
One is initial render which is static html, the second one is json data used for hydration
The docs has explained this behaviour: https://nextjs.org/docs/app/building-your-application/rendering#static-rendering
American black bearOP
If I don't require the js part of it, how can I remove it? I'm planning to build a blog with MDX and it seems unnecessary for my needs.
Hydration is a process that done by Next.js. Unfortunately, we don't have an option to disable or skip this process.
The reason is simple: Many components, such as
The reason is simple: Many components, such as
next/link have client-side code, it's impossible to do it without the React.js library.And if we load React.js, we must recreate the UI using React.js. we call it hydration. The data needed to recreate the UI is just the "duplicate part" you mentioned above.