Что означают директивы "use client" и "use server" в Next.js App Router и как это соотносится с Pages Router?

В Next.js App Router (папка app/) все компоненты по умолчанию являются React Server Components. Это значит, что они выполняются только на сервере, не попадают в клиентский бандл и не могут использовать хуки вроде useState или браузерные API. Чтобы пометить файл как клиентский, в самом верху пишут директиву "use client". Тогда компонент и все его импорты становятся частью клиентского бандла.

Директива "use client"

Она ставится первой строкой файла и говорит сборщику: этот модуль и его зависимости должны исполняться в браузере. Внутри можно использовать хуки, обработчики событий, window, localStorage и т.д.

"use client";
import { useState } from "react";

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

Директива "use server"

Она помечает функцию как Server Action — серверную функцию, которую можно вызывать прямо из клиентского компонента. Next.js сам создаёт сетевой вызов и сериализует аргументы.

"use server";
export async function saveUser(formData) {
  const name = formData.get("name");
  await db.users.create({ name });
}

В клиентском компоненте её можно передать в action формы или вызвать вручную.

Отличие от Pages Router

В Pages Router (папка pages/) нет Server Components. Любая страница — это обычный React-компонент, который рендерится на сервере при первом запросе, а затем гидрируется в браузере. Серверные функции делают через getServerSideProps или API routes, а не через директивы. То есть граница server/client там неявная и задаётся функциями фреймворка, а не директивами в коде.

Практические правила

• По умолчанию пишите серверные компоненты — они легче и безопаснее.
• Ставьте "use client" только там, где нужны хуки, события или браузерные API.
• Клиентские компоненты можно вкладывать в серверные, но не наоборот без импорта.
• "use server" используйте для мутаций данных и форм.

Итог: директивы "use client" и "use server" — это способ явно указать среду исполнения в App Router, что даёт меньший бандл и лучшую безопасность. В Pages Router такой модели нет, поэтому при миграции стоит переосмыслить, какие компоненты действительно должны быть клиентскими.