В Next.js с использованием App Router компоненты делятся на серверные и клиентские.

Серверные компоненты (Server Components) рендерятся на сервере и отправляют готовый HTML на клиент. Они не содержат состояния и не используют хуки React, завязанные на браузер (например, useState, useEffect). Это позволяет уменьшить размер бандла и повысить производительность.

Клиентские компоненты (Client Components) — это обычные React-компоненты, которые рендерятся и работают уже на клиенте. Чтобы сделать компонент клиентским, в начале файла нужно добавить директиву 'use client';.

Гидратация — процесс, когда React на клиенте "оживляет" серверный HTML, связывая его с интерактивностью. В Next.js гидратация происходит автоматически для клиентских компонентов, встроенных в серверный рендеринг.

Пример:

// app/page.jsx (серверный компонент по умолчанию)
export default function Page() {
  return (
    <div>
      <h1>Привет с сервера</h1>
      <Counter /> {/* клиентский компонент */}
    </div>
  );
}

// app/Counter.jsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Нажали {count} раз</button>;
}

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

Серверные и клиентские компоненты в Next.js App Router, гидратация