[Next.js 15 App Router] JSON-LD schema inside <Script> ends up in hydration — how to insert SSR-only?

[alexabbykiv]

Hey everyone!

I'm working with Next.js 15 and the App Router. I need to inject dynamic JSON-LD schema (type="application/ld+json") into the — on the server only, and without it being included in hydration or the JS bundle.

I initially tried this:

const BreadcrumbListMeta = (props: BreadcrumbListProps) => {
  const { paths } = props;

  return (
    <Script strategy="beforeInteractive" type="application/ld+json">
      {`{"@context":"http://schema.org","@type":"BreadcrumbList","itemListElement":[${paths
        ?.filter((item, index) => item.href || !index)
        .map(
          ({ href, text }, i) =>
            `{"@type": "ListItem","position": "${++i}", "item": {"@id":"${href}","name":"${capitalizeEachWord(text)}"}}`,
        )}]}`}
    </Script>
  );
};

export async function generateMetadata(props: PageParams): Promise<Metadata> {
  const searchParams = await props.searchParams;
  const data = await loadData(searchParams)

  return {  // meta data };
  }

export default async function Page(props: PageParams) {
    const searchParams = await props.searchParams;
    const data = await loadData(searchParams)

    return (
      <>
        <BreadcrumbListMeta{...props} />
        {/* other stuff */}
      </>
    );
  }

But this leads to the <script type="application/ld+json"> being hydrated, I have large dynamic JSON-LD data that bloats the hydration payload and ruins performance — how can I inject it server-side only without hydration in Next.js 15 App Router?

[icyJoseph]

Would you mind trying this way out? There's a super hacky thing you can do, switch to script, not next/script, and use dangerouslySetInnerHTML, but in a quirky way:

• server side, inject your JSON-LD payload (you should look into sanitizing that btw!)
• client side, do an typeof window !== 'undefined, and pass a space to the dangerouslySetInnerHTML
• make sure to also have supressHydrationWarning on the script

I've never used this hack myself, but as far as I understand, React will encounter the different innerHTML, try to warn, but be supressed, and the move on, skipping hydration, and skipping manipulating the DOM contained within.

'use client'

export default function Home() {
  return (
    <script
      suppressHydrationWarning
      type="application/ld+json"
      dangerouslySetInnerHTML={{
        __html: typeof window !== 'undefined' ? " " :  '{"foo": "bar"}')
      }} />
  );
}

Something like that, it is silly, and hacky, but does it help you?

[alexabbykiv]

It doesn't work, it still gets into the hydration.

[icyJoseph]

what are you referring to as the "hydration". The initial RSC payload scripts?

[alexabbykiv]

Yes, we migrated from Page Routes to App Routes, and we're now facing an issue: all layout scripts that are placed in the are duplicated in the as part of the RSC payload during hydration. This duplication didn’t happen with Page Routes. It significantly impacts SEO, especially for pages that rely heavily on organic traffic and include a lot of structured data (e.g., organization schemas)

[icyJoseph]

uff this is I think, still an issue, x2 data problem, curious how you didn't have this issue in pages route? wouldn't pageProps have the content too?

• Document or fix known issues with this demo next-react-server-components#13 (comment) (see the nested checkbox that's not checked yet)

[eric-summersault]

Has anyone figured out a way to solve this? I've run into the same issue where the <script> tags are getting included in the RSC payload during hydration instead of being in the initial HTML.

This prevents Google from being able to find the content and really hurts SEO.