Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

<Head /> Titles Are Blank #5774

Closed
geirman opened this issue Nov 30, 2018 · 4 comments
Closed

<Head /> Titles Are Blank #5774

geirman opened this issue Nov 30, 2018 · 4 comments

Comments

@geirman
Copy link

geirman commented Nov 30, 2018

Bug report

Describe the bug

Bug #5635 was closed as a duplicate of #5628, but I don't think it actually was a duplicate. I can see why you'd think so at first glance though. Both seem to be related to the Fragment tag's usage, but at least for the case of #5635, I think that was a coincidence because the problem described there is something I'm also seeing.

A clear and concise description of what the bug is.

To Reproduce

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

  1. Run git clone https://github.com/geirman/nextjs-title-bug
  2. Run cd nextjs-title-bug
  3. Run Yarn (duh!)
  4. Run npm run dev
  5. Note that the expected title flashes briefly, then becomes empty.
  6. Now disable javascript and reload the page
  7. Note the server rendered title persists as expected

Expected behavior

The server rendered title should persist even after the client script is run

Screenshots

kapture 2018-11-29 at 18 16 59

System information

  • OS: macOS
  • Browser (if applies) Firefox
  • Version of Next.js: 7.0.2

Additional context

So you don't have to go through the repo code...here's a copy/paste of the relevant pages.

Page.js

import Head from 'next/head'
import Title from './Title'

const Page = props => (
  <div>
    <Head>
      <Title title={props.title} />
    </Head>
    {props.children}
  </div>
)

export default Page

Title.js

export default ({ title }) => (
  <title>
    {`${title} | My Awesome Website`}
  </title>
)

/pages/index.js used like so...

import Page from '../layout/Page'

const Home = props => (
  <Page title="Home">
    <h1>Home</h1>
    <p>Hey home!</p>
  </Page>
)

export default Home
@geirman geirman changed the title Head > Title == Blank <Head /> Titles Are Blank Nov 30, 2018
@lucleray
Copy link
Member

lucleray commented Dec 2, 2018

Maybe this happens because <title> is nested inside <Head> 🤔

Have you tried with Title.js calling next/head directly itself ?

import Head from 'next/head'

export default ({ title }) => (
  <Head>
    <title>
      {`${title} | My Awesome Website`}
    </title>
  </Head>
)

And removing Head from Page.js :

import Title from './Title'

const Page = props => (
  <div>
    <Title title={props.title} />
    {props.children}
  </div>
)

export default Page

@geirman
Copy link
Author

geirman commented Dec 2, 2018

You're right. Since Title is just a stateless functional component, I would expect it to work. But if I remove the extra layer, it works. Why would that be? Are there nuances to React's composability at play here I'm not aware of? thx for your time @lucleray

@geirman geirman closed this as completed Dec 2, 2018
@lucleray
Copy link
Member

lucleray commented Dec 2, 2018

@geirman
This is because of the implementation of next/head, and doesn't really have to so with react. next/head will loop over its direct children, but won't look recursively for nested title, meta, ... This is necessary so that next/head can help you do some useful things (order tags, deduplicate meta, title tags, ...)

@geirman
Copy link
Author

geirman commented Dec 2, 2018

Ah, that makes sense. Thanks for the explanation!

@lock lock bot locked as resolved and limited conversation to collaborators Dec 2, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@geirman @lucleray