Два типа компонентов

Каждый компонент, который вы написали до сих пор в этом разделе, выполнялся там, где вы могли и не заметить: на сервере. Это не какой-то специальный режим, который вы включили: это поведение по умолчанию, и это самая главная идея в Next.js.

Есть ровно два типа компонентов, и каждый из них дает то, чего не может дать другой.

Серверные компоненты: по умолчанию

• Они выполняются один раз, на сервере, перед отправкой страницы
• Они могут быть async, поэтому могут получать данные через await прямо внутри компонента
• Они не отправляют JavaScript в браузер: пользователь загружает результат, а не код

Подвох в том, что к тому моменту, когда страница попадает в браузер, серверный компонент уже завершил работу. Это снимки состояния (snapshot). Он не может ничего запоминать, реагировать на клики или изменяться.

Клиентские компоненты: явное включение

Когда вам нужно, чтобы страница стала интерактивной (отвечала на действия пользователя), вы подключаете файл к браузеру с помощью одной строки в самом верху:

'use client';

Это помечает файл как клиентский компонент, и только клиентские компоненты могут использовать:

• Хуки: useState, useEffect и подобные
• Обработчики событий: onClick, onChange, …
• Browser API: window, localStorage

Обратите внимание на компромисс. Серверный компонент — быстрый и тихий, но замороженный. Клиентский компонент — живой, но его код должен быть загружен и выполнен в браузере.

Так что вопрос, который вы отныне будете задавать по поводу каждого компонента, звучит не как «какой мне больше нравится?», а «должен ли этот конкретный фрагмент реагировать на действия пользователя?» Если ответ «нет» (а чаще всего так и есть), оставьте его на сервере.