probable-pink

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...

12 Replies

ambitious-aqua•5mo ago

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

how is the hydration issue related to google bot?

probable-pinkOP•5mo ago

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

probable-pinkOP•5mo 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

probable-pinkOP•5mo 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

ambitious-aqua•5mo ago

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

adverse-sapphire•4mo ago

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

adverse-sapphire•3mo ago

@Manuel Schiller I'm trying to fix this issue. There's an existing PR, but it seems to be stalled. Would it be okay if I create a new PR to move this forward?

ambitious-aqua•3mo ago

yes absolutely! we first need e2e tests for that then fix it

adverse-sapphire•3mo ago

I added a new PR, and it seems to be working fine. could you review it?

ambitious-aqua•3mo ago

there are some IMO valid code rabbit comments about nonce etc can you have a look please?

adverse-sapphire•3mo ago

I reviewed the code rabbit comments. Comparing the nonce value as well seems more accurate and secure. I have modified the code.

Gaming

Programming

Hydration Issue causes Duplicate HEAD Script

Did you find this page helpful?