afraid-scarlet

Hydration Issue causes Duplicate HEAD Script

See: https://github.com/TanStack/router/issues/4585 I don’t have a shareable example, I can try to reproduce into an isolated repo over the weekend, however. What is happening: SSR is filling in LD-JSON data in the HEAD of my page route with SEO specific metadata for Google to render with the results (e.g a star review rating for the page) When Google bot loads the page, there is a hydration issue, and when the client resolves the hydration mismatch, the HEAD gets loaded again, causing TWO LD-JSON script tags on the page. This is then causing Googlebot to issue validation errors on my page and disables the enrichments

GitHub

Using createRootRoute, Scripts, and HeadContent components ad...

Which project does this relate to? Start Describe the bug When using the Scripts component and defining scripts array inside createRootRoute, the same script gets added multiple times in the head t...

7 Replies

genetic-orange•2mo ago

When Google bot loads the page, there is a hydration issue

how is the hydration issue related to google bot?

afraid-scarletOP•2mo ago

I was able to replicate it in: https://github.com/razfriman/tanstack-head-dupe

afraid-scarletOP•2mo ago

Also managed to replicate it with a singular ROOT route: https://github.com/razfriman/tanstack-head-dupe/blob/root-route/src/routes/__root.tsx

afraid-scarletOP•2mo ago

Duplicate SCRIPT head tag:

        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body>
                <Header />
                <Outlet />
                <Scripts />
            </body>
        </html>

        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body>
                <Header />
                <Outlet />
                <Scripts />
            </body>
        </html>

NO SCRIPT tag:

        <html lang="en">
            <head></head>
            <body>
                <Header />
                <Outlet />
                <Scripts />
            </body>
        </html>

        <html lang="en">
            <head></head>
            <body>
                <Header />
                <Outlet />
                <Scripts />
            </body>
        </html>

ONE HEAD SCRIPT TAG (but what about normal body "Scripts?":

        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body>
                <Header />
                <Outlet />
            </body>
        </html>

        <html lang="en">
            <head>
                <HeadContent />
            </head>
            <body>
                <Header />
                <Outlet />
            </body>
        </html>

Docs mention:

To manage the document head, it's required that you render both the <HeadContent /> and <Scripts /> components and use the routeOptions.head property to manage the head of a route, which returns an object with title, meta, links, styles, and scripts properties.

It might be a ROUTER bug? https://discord.com/channels/719702312431386674/1392738885703958630/1393495250441605140

genetic-orange•2mo ago

please dont bump. we have a github issue already for this, so someone needs to take the time to fix this.

rare-sapphire•4w ago

Same issue here, @Manuel Schiller any updates on this?

Gaming

Programming

Hydration Issue causes Duplicate HEAD Script

Did you find this page helpful?