Участвуют ли клиентские компоненты в генерации HTML на сервере, или они выполняются только в браузере?

Как работают клиентские компоненты в Next.js

В Next.js клиентские компоненты — это компоненты, которые помечены директивой 'use client'. Они участвуют в серверном рендеринге: сервер генерирует их HTML-разметку, которая отправляется клиенту. Это важно для SEO и быстрой первоначальной загрузки, так как пользователь видит контент до выполнения JavaScript.

После загрузки HTML в браузер Next.js выполняет гидратацию: JavaScript-код компонента загружается и привязывается к существующей разметке, добавляя интерактивность (обработчики событий, состояние, эффекты). До гидратации клиентский компонент отображается как статический HTML.

Пример

// app/counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

Этот компонент рендерится на сервере как <button>Count: 0</button>, а затем в браузере становится интерактивным.

Вывод

Клиентские компоненты не выполняются только в браузере — они рендерятся на сервере для начального HTML, но их логика и интерактивность работают исключительно на клиенте. Это сочетание обеспечивает быструю загрузку и полноценное взаимодействие.