There are three nested components: server (div), client (div), server (button). What HTML will come from Next.js before hydration?

Next.js, during server-side rendering, will output HTML generated only from server components. Client components will not be rendered on the server; instead, a special placeholder (for example, an empty div with hydration attributes) will be inserted.

In your case, the structure is: server div → client div → server button.

On the server, an outer server div will be rendered, inside it a placeholder for the client div, and the inner server button itself will not be included in the HTML, as it is nested within a client component and rendered only on the client.

An example of simplified HTML before hydration:

<div> <!-- server div -->
  <div data-nextjs-client-component></div> <!-- placeholder for client div -->
</div>

The client div, during hydration, will load and render the nested server button already on the client.