Hi,

[luke-hanwook]

  Hi,

The warning is because when you do:

const Home: NextPage = () => {
  const world = "World";
  return (
    <div>
      <span>Hello {world} foo</span>
    </div>
  );
};

React renders:

<div><span>Hello <!-- -->World<!-- --> foo</span></div>

That's a div with a span child, with 0 children elements, but 5 nodes as children. There's a subtle difference between elements and nodes. Here's a handy video.

The 5 nodes are, text, comment, text, comment, text. The same is happening to your title element.

Do this instead:

const Home: NextPage = () => {
  const world = "World";
  const message = `Hello ${world} foo`;
  return (
    <div>
      <span>{message}</span>
    </div>
  );
};

Which outputs:

<div><span>Hello World foo</span></div>

Now the span has only one, text, child node.

SEO Merits

Well... in either case the bot/crawler, or whatever SEO entity, has to be arrive with the query in the URL already. Since you are using GSSP, in both cases (right?), for any first request the entire HTML string will be generated server side, so the bot/crawler should parse a correct title.

If you visit the site, with query in the URL, and then right click to "View Page Source", do you see the correct title there? If so, then you are good.

Originally posted by @icyJoseph in vercel/next.js#38256 (comment)