Head's title renders with "<!-- -->" in title on first render

[keyserj]

Describe the bug

Ran into an issue using the useConfig hook for head() - when I tried to use code like this in the theme config file:

  head: function Head() {
    const config = useConfig();

    return (
      <>
        <title>{config.title} | Site Name</title>
      </>
    );
  },

My title initially loaded as e.g. Introduction<!-- --> | Site Name for a moment before re-rendering without the odd <!-- -->:

chrome_2024-11-25_14-53-31.mp4

I followed the code for the nextra site itself exactly by extracting a title variable, like so:

  head: function Head() {
    const config = useConfig();
    const title = `${config.title} | Site Name`;

    return (
      <>
        <title>{title}</title>
      </>
    );
  },

No idea why these would be different, but this works without the issue. Really easy fix so not sure if this is worth a bug report but I thought it'd be worth documenting in an issue here at least, in case others have the issue in the future.

Reproduction

I deployed my changes to a branch:

• https://deploy-preview-573--ameliorate-docs.netlify.app/docs (sometimes it flickers quickly - you can use devtools > network > throttle to Fast 4G to see it more emphasized)
• branch with theme.config.tsx https://github.com/amelioro/ameliorate/blob/example-nextra-title-issue/docs-site/theme.config.tsx#L54-L68

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome 130.0.6723.117 (Official Build)
• Version: nextra/nextra-theme-docs 3.2.4