Que HTML será enviado pelo Next.js antes da hidratação?

Next.js при серверном рендеринге отдаст HTML, сгенерированный только из серверных компонентов. Клиентские компоненты не будут отрисованы на сервере, вместо них будет вставлен специальный placeholder (например, пустой div с атрибутами для гидратации).

В вашем случае структура: серверный div → клиентский div → серверный button.

На сервере будет отрендерен внешний серверный div, внутри него — placeholder для клиентского div, а сам внутренний серверный button не будет включён в HTML, так как он вложен в клиентский компонент и рендерится только на клиенте.

Пример упрощённого HTML до гидратации:

<div> <!-- серверный div -->
  <div data-nextjs-client-component></div> <!-- placeholder для клиентского div -->
</div>

Клиентский div при гидратации загрузит и отрендерит вложенный серверный button уже на клиенте.