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 уже на клиенте.

Есть три вложенных компонента: серверный (div), клиентский (div), серверный (button). Какой HTML придёт от Next.js до гидратации?