Для чего нужен асинхронный компонент?

Асинхронный компонент (async-функция как компонент) — это серверный компонент, который может ждать данные прямо в своём теле. Нужен, чтобы данные и разметка описывались вместе, без эффектов и состояний загрузки в коде.

Как выглядит

// серверный компонент (Next.js App Router)
const ProductPage = async ({ params }) => {
  const product = await db.products.find(params.id);  // ждём прямо в теле
  const reviews = await api.getReviews(params.id);

  return (
    <>
      <ProductInfo product={product} />
      <Reviews items={reviews} />
    </>
  );
};

Что это даёт

• Исчезает клиентский бойлерплейт: не нужно useEffect + useState + isLoading/error — компонент просто «имеет» данные.
• Данные ближе к месту использования: каждый компонент запрашивает своё, а не страница собирает всё сверху.
• Быстрее и безопаснее: запросы выполняются на сервере (рядом с БД), секреты не утекают, код запроса не попадает в бандл.
• Состояния ожидания выражаются декларативно: обёртка <Suspense fallback={...}> показывает скелетон, пока компонент ждёт; стриминг отдаёт остальную страницу сразу.

Ограничения

Async-компоненты работают только как серверные (RSC): в клиентских компонентах async-функция не поддерживается — там данные получают через хуки (React Query) или через хук use(promise) (React 19), который «разворачивает» промис с поддержкой Suspense:

'use client';
const Comments = ({ commentsPromise }) => {
  const comments = use(commentsPromise); // клиентский способ «подождать»
  ...
};

Коротко для собеседования

Асинхронный компонент — серверный компонент-async-функция: await данных прямо в теле, без useEffect/isLoading; ожидание оформляется Suspense-границами со стримингом. Работает только на сервере; на клиенте аналог — hook use(promise) из React 19 или React Query.