SEO next.js 15: output html wrapping in a hidden div

[trantrongbinh]

Link to the code that reproduces this issue

https://github.com/trantrongbinh/next-demo/blob/main/src/app/page.tsx

To Reproduce

when i fetch in page.js:

export default async function Page() {
  let data = await fetch('https://api.vercel.app/blog')
  let posts = await data.json()

  return (
    <div>
      <section className="p-8 flex flex-col h-full justify-center">
        <h1 className="text-3xl font-bold font-poppins">Next Starter ⚡</h1>
        <p className="text-lg">
          A highly opinionated and complete starter for Next.js projects ready
          to production
        </p>
      </section>
    </div>
  );
}

and view page source then html wrapped in hidden div:

<div hidden id="S:1">
    <div class="h-full flex flex-col bg-var(--background)">
        <section class="p-8 flex flex-col h-full justify-center">
            <h1 class="text-3xl font-bold font-poppins">Next Starter ⚡</h1>
            <p class="text-lg">A highly opinionated and complete starter for Next.js projects ready to production</p>
        </section>
    </div>
</div>

but if i without fetch:

export default async function Page() {
  return (
    <div>
      <section className="p-8 flex flex-col h-full justify-center">
        <h1 className="text-3xl font-bold font-poppins">Next Starter ⚡</h1>
        <p className="text-lg">
          A highly opinionated and complete starter for Next.js projects ready
          to production
        </p>
      </section>
    </div>
  );
}

then output html like:

<section class="flex-1">
    <div>
        <section class="p-8 flex flex-col h-full justify-center">
            <h1 class="text-3xl font-bold font-poppins">Next Starter ⚡</h1>
            <p class="text-lg">A highly opinionated and complete starter for Next.js projects ready to production</p>
        </section>
    </div>
    <!--/$-->
    <div class="tsqd-parent-container"></div>
</section>

Does wrapping in a hidden div affect SEO? If so, how can I fix it?

Current vs. Expected behavior

Does wrapping in a hidden div affect SEO? If so, how can I fix it?

Provide environment information

- node: v20.18.3
- npm: 10.8.2

Which area(s) are affected? (Select all that apply)

Output

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

No response

[YashasaveeKesarwani99]

This is not the best way to make a fetch call inside a next component. The functions that trigger side effects should be rendered in client side and only inside useEffect.

In the above example, you can either use getServerSideProps to fetch the data in the server itself and then pass it to the given component as props or remove the side effect ( fetch call ) as a whole from the component.

Now coming to your question, yes the hidden property hinders SEO. You can follow the above suggestion to improve the SEO of this page.

[a463]

I think your Page component is a pretty common usage of fetching data in a server component, and even recommended in the docs.

Good timing on this, I just make a feature discussion about this yesterday to disable streaming for crawlers: #76629.