Next.js: next/head rendering custom components server-side but not client-side

Created on 18 Oct 2019 · 7Comments · Source: vercel/next.js

Bug report

Describe the bug

If a custom <Component /> is rendered inside of Head it's rendered server-side but then disappears client-side.

Custom components are not even rendered client-side as side effects (console.log) in their render method are not executed.

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Check https://github.com/emirotin/next-head-bug. All the relevant code is in _app.js
Load the index page in the browser. Check its source code, there are 4 custom <meta> tags, and the next-head-count is 6
View the DOM in the DevTools. Now there are only 2 custom <meta> tags (those rendered directly as HTML tags in JSX, but not those rendered through a custom component), and the next-head-count is 4

Expected behavior

I expect the custom <Component /> to be rendered and not removed. It used to work before.

Screenshots

SSR:
SSR
DOM: DOM

System information

OS: macOS
Browser: Chrome
Version of Next.js: 9.1.1

Source

emirotin

👍2

Most helpful comment

I'm still experiencing the same problem on 9.1.4. I have the same wrapper-components for favicons in the <Head> like @emirotin and they suddenly started disappearing after hydration. The raw html that I'm getting from the server still has them in place.

thebat93 on 25 Nov 2019

👍5

All 7 comments

This may have _just_ been fixed via https://github.com/zeit/next.js/pull/8960.

Timer on 18 Oct 2019

It's not really a bug. next/head has never really supported rendering sub-components. Instead you could inverse the component tree by using next/head inside of the custom component as it could be rendered multiple times on a page.

I'm going to close this issue as next/head is going to be deprecated very soon, see: https://github.com/zeit/next.js/issues/8981

timneutkens on 18 Oct 2019

has never really supported rendering sub-components

This is surprising and it used to work with 9.0 but stopped with 9.1. This means we have to lock to ~9.0 as I see no point in refactoring the code that has been perfectly working for multiple months.

Also, I should add inconsistency between SSR and CSR _is_ a bug in my understanding. Logical behavior would be to either work in both cases or none.

Inverting doesn't sound great, I have a generic component for all my site's Favicons that is transforming the config into a React tree of meta and link tags, it doesn't need to know about where it will be used, be it next/head or something completely next-unrelated.

emirotin on 18 Oct 2019

👍1

We'd be happy to take in a PR to fix it if you want to investigate why it happens.

timneutkens on 18 Oct 2019

thebat93 on 25 Nov 2019

👍5

Did anyone resolve this? I have the same issue with favicons that disappear after hydration

guilouro on 22 Jul 2020

@leerob @timneutkens so I think I just ran into this (which sucks cuz I just finished recording my talk yesterday).

I think this important to resolve regarding #16361 and providing people a gradual migration path towards Next.js from CRA.

Essentially, my "app" that's only rendered client-side in a catch-all route now no longer has working twitter cards or og metadata. I tried leveraging react-helmet following the with-react-helmet to no avail.

Perhaps there's some step I'm missing to somehow ensure client-populated metatags work? I could also use prerender.io for the client routes to ensure the separation between client and server wont matter.