Серверные компоненты

В серверных компонентах (Server Components App Router) данные получаются прямым вызовом метода API-клиента. SWR и хуки здесь не применяются — они для клиентского кода.

Создание клиента — Автоматическая / Ручная генерация.

Правила

• Прямой await метода клиента. Никаких хуков, обёрток состояний, useEffect — серверный компонент не имеет жизненного цикла React-клиента.
• Ошибки бросаются. Не оборачивать try/catch без необходимости — Next.js поднимет ближайший error.tsx.
• Параллельные запросы — через Promise.all. Последовательный await за await блокирует рендер.

Шаблон

// src/app/(routes)/users/page.tsx
import { petProjectApi } from 'infrastructure/pet-project-api'

export default async function UsersPage() {
  const users = await petProjectApi.user.list()

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

Параллельные запросы

export default async function DashboardPage() {
  const [users, orders] = await Promise.all([
    petProjectApi.user.list(),
    petProjectApi.order.list(),
  ])

  return <Dashboard users={users} orders={orders} />
}

Передача данных в клиентский компонент

Серверный компонент получает данные и передаёт их пропсами в клиентский. На клиенте данные становятся начальным состоянием — при необходимости перезапрашиваются через SWR (см. Клиентские компоненты).

// page.tsx (server)
import { petProjectApi } from 'infrastructure/pet-project-api'
import { UsersList } from 'widgets/users-list'

export default async function UsersPage() {
  const initialUsers = await petProjectApi.user.list()
  return <UsersList initialUsers={initialUsers} />
}

Запрет прямого fetch

Серверный компонент тоже использует только клиент из infrastructure/. Прямой fetch в page.tsx или в server-action запрещён теми же правилами, что и на клиенте.