Empty div with hidden attribute tag

[nongtiny]

Next version: 15.3.4

Browser Chrome: 137.0.7151.120

Dear Vercel Team,

I've noticed an unexpected empty <div hidden> tag appearing in the build output of my application, seemingly originating from the server-side rather than the client-side.

Could you please provide some insight into how this empty div tag might be generated during the build process? Any guidance or explanation would be greatly appreciated.

Thank you for your time and assistance.

[4anghyeon]

I think it is related to the process of creating metadata. [code]

[icyJoseph]

how is the hidden div breaking perfect semantic HTML?

[LeoAnt02]

@icyJoseph
In perfect semantic HTML each tag element in the body need a meaning and perfect order
For example if you want header tag as the first ever element in the body - this is not possible here currently with next

I ended up resolving this issue by force patching next and then later creating my own version of next

Since our page a full SSG - removing this didnt change anything on my end

[dewadavidweb]

@LeoAnt02 Can you share how you patched next to remove that div hidden?

[clxrityy]

Within a file like /.next/server/vendor-chunks/[email protected]_@[email protected][email protected][email protected][email protected], I found a function that looks like this:

function Metadata() {
  if (!serveStreamingMetadata) {
    return /*#__PURE__*/ (0, _jsxruntime.jsx)(MetadataResolver, {});
  }
  return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
    hidden: true,
    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.Suspense, {
      fallback: null,
      children: /*#__PURE__*/ (0, _jsxruntime.jsx)(MetadataResolver, {}),
    }),
  });
}

Which is in relation to the Pull Request @4anghyeon mentioned.

This is the exact commit

Seems like a little trick to balance the need to present metadata early.

[LeoAnt02]

@dewadavidweb
I'm now running all my next project, on a fork of next where I publish my own private packages

but tldr

you need to remove the hidden div here in the source code

packages/next/src/lib/metadata/metadata.tsx

from

<div hidden>
 <Suspense fallback={null}>
   <MetadataResolver />
  </Suspense>
</div>

to

<Suspense fallback={null}>
 <MetadataResolver />
</Suspense>

you can also go the patch route, and find the compiled code for this

After doing this change, for Static Pages - SSR
I saw 0 negative impact, and perfect semantic html