Чем отличаются серверные и клиентские компоненты в Next.js App Router? Что такое гидратация?

Основные различия между серверными и клиентскими компонентами

В Next.js App Router компоненты по умолчанию являются серверными. Серверные компоненты выполняются на сервере, генерируют статический HTML и не отправляют JavaScript на клиент. Они идеальны для отображения данных, которые не требуют интерактивности, например, контент из базы данных. Клиентские компоненты, напротив, выполняются в браузере и могут использовать хуки React (useState, useEffect), обработчики событий и API браузера.

Что такое гидратация?

Гидратация — это процесс, при котором React берет статический HTML, отправленный с сервера, и превращает его в интерактивное приложение. React добавляет обработчики событий, восстанавливает состояние и подключает виртуальный DOM. Это позволяет улучшить производительность загрузки, так как пользователь видит контент до того, как JavaScript полностью загрузится.

Пример кода

// Серверный компонент (по умолчанию)
export default function ServerComponent() {
  const data = fetchDataFromDB(); // выполняется на сервере
  return <div>{data}</div>;
}

// Клиентский компонент
'use client';
import { useState } from 'react';
export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Вывод

Используйте серверные компоненты для статического контента и данных, а клиентские — для интерактивных элементов. Гидратация автоматически делает серверный HTML интерактивным, что улучшает пользовательский опыт и SEO.