Recommended way to set title and meta using this package

[Stevemoretz]

When using graphQL to get the info about an entity such as a product on a product page, you need to include the product's name in the title of the page, along with metadata for SEO purposes.

This is the way next.js supports dynamic title and metadata. https://nextjs.org/docs/app/api-reference/functions/generate-metadata

export async function generateMetadata({ params }) {
  return {
    title: '...',
  }
}

Well you can't run a hook in there cause it's a server component, you can probably do it the this way: https://github.com/apollographql/apollo-client-nextjs#in-rsc

But still that means you'll be using both RSC and SSR at the same time, which probably means 2 requests will be sent for getting the same thing, I couldn't find a way to set title and metadata right inside the render method cause if we could that could be much simpler.

[phryneas]

You can also just render a <title> element in a Client Component and React will automatically scope it into the head, but it could be worse for SEO.

If you want to use generateMetadata, there's just no way around doing two requests here. There is no possible way of sharing data.

[Stevemoretz]

You can also just render a <title> element in a Client Component and React will automatically scope it into the head, but it could be worse for SEO.

If you want to use generateMetadata, there's just no way around doing two requests here. There is no possible way of sharing data.

Thank you so much for the response, did you mean that the title tag will only be set after Javascript has run in the browser and it won't be set on the server-side and that's why it's worse for SEO?

[Stevemoretz]

Setting title didn't seem to work perfectly as you mentioned, clearly not much thought was put into a lot of things in NextJS 13 and this is one of them, I ended up using: generateMetadata with https://github.com/apollographql/apollo-client-nextjs#in-rsc and it worked perfectly, the only downside is that it sends two requests, maybe in the close future Next team will provide a better way for doing this or at least, making it possible to share data between SSR and RSC somehow.

[phryneas]

Thank you so much for the response, did you mean that the title tag will only be set after Javascript has run in the browser and it won't be set on the server-side and that's why it's worse for SEO?

It would be happening later, so depending on the crawler engine it might be worse for SEO - but I'm not a SEO expert, so I can only point out that it might have some influence, but I don't know the real implications.

As for lifting a rendered <title tag into the document head automatically - this is something that React should do, so it's not directly a Next.js thing - but of course it's only in React canary builds, and while Next runs with them and both the React and Next team call it stable, I can't tell you if this will actually work in all situations - it's one more of those "undocumented" features that may or may not actually be stable.

[phryneas]

I'm doing some housekeeping so I'm closing some older issues that haven't seen activity in a while. If this is still relevant, please feel free to reopen the issue.

[github-actions[bot]]

Do you have any feedback for the maintainers? Please tell us by taking a one-minute survey. Your responses will help us understand Apollo Client usage and allow us to serve you better.

[bmax]

Woud love to see this be integrated w/ https://github.com/apollographql/apollo-client-nextjs#in-rsc