Handling API-Fetched HTML Without Duplication in Next.js

Hello,

I am using Next.js to build a website with longreads. The content of the longread is fetched from an API and rendered on the page using dangerouslySetInnerHTML. However, I have noticed that the HTML content is duplicated: it is rendered in the server-side HTML (which is expected), but it is also included in the <script> tag that Next.js sends for hydration.

This duplication negatively affects page performance because the semantic structures of the longread are parsed and processed twice — once in the HTML and once in the hydration script. In my case, seamless client-side navigation is not critical, so this duplication is unnecessary and creates overhead.

My questions are:

Is there a way to prevent Next.js from including duplicate HTML in the hydration <script> for this specific use case, since the content is already rendered in the HTML?
Are there any recommended approaches or best practices for rendering API-provided HTML in Next.js without incurring this duplication?
If this is not currently possible, are there plans to support this kind of optimization in the future?

Thank you for your help and for building such an amazing framework!

Best regards, Eugene

Hi , welcome to the Vercel Community!

I understand the issue you are facing but without looking at the code it's tough to provide solutions.

Could you please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

Hi, glad to join)

I’ve prepared a simple example to demonstrate the issue: https://codesandbox.io/p/devbox/f7l7zc.

In the file app/page.tsx, there is a fetch request that retrieves an HTML fragment, which is then inserted into the page using dangerouslySetInnerHTML.

The issue is as follows: the fetched content is already semantically present in the server-rendered HTML. However, it is also fully duplicated within the <script> tag used for hydration. You can verify this by searching the page source for the phrase "Start longread" — it appears twice.

While it makes sense for this prop to exist during subsequent client-side transitions, it is unnecessary when the content is already part of the initial HTML. This duplication significantly increases the page size, especially for large longreads, and negatively impacts performance.

Is there a way to avoid sending this prop during the initial server-rendered load, given that the content is already embedded in the HTML?

Hi , sorry that you are facing the issue.

But I wasn't able to recreate the issue, see I only see 1 occurrence, in the rendered HTML.

Start longread

About the <script> tag, I think that's a Next.js internal working. I'd advice posting it in a discussion on the Next.js Github repository to get more in-depth suggestions from the developer community.

It's not about the rendered text, but about the resources sent in the response. I've attached a screenshot to clarify. 2025-01-09_16-55

Either way, I'll open an issue on GitHub. Thank you.