docs/projects/nextjs-style-guide/canons/applied/data-fetch/pass-promise-down.md

title, description, keywords

title	description	keywords
Передача промиса ниже	Как запускать серверный REST-запрос выше и ожидать его во вложенном server-компоненте.	rest promise suspense streaming server components

Передача промиса ниже

Серверный компонент может запустить запрос и передать промис вложенному server-компоненту. Это полезно, когда часть UI можно загрузить отдельно через Suspense.

Когда использовать

• Верхняя часть страницы может отрендериться без этих данных.
• Данные нужны только вложенному server-компоненту.
• Нужна Suspense-граница и серверный стриминг.

Пример

// src/app/(routes)/pets/page.tsx
import { Suspense } from 'react'
import { petStoreApi, StatusEnum } from 'infra/pet-store-api'
import { PetListSection } from 'widgets/pet-list-section'
import { PetListSkeleton } from 'widgets/pet-list-section'
import type { Pet } from 'infra/pet-store-api'

export default function PetsPage() {
  const petsPromise = petStoreApi.pet.findPetsByStatus({
    status: StatusEnum.Available,
  })

  return (
    <main>
      <h1>Питомцы</h1>
      <Suspense fallback={<PetListSkeleton />}>
        <AvailablePets petsPromise={petsPromise} />
      </Suspense>
    </main>
  )
}

async function AvailablePets({ petsPromise }: { petsPromise: Promise<Pet[]> }) {
  const pets = await petsPromise

  return <PetListSection pets={pets} />
}

Запрос стартует в PetsPage, но ожидание происходит внутри AvailablePets. Suspense управляет fallback для этой части UI.

Граница стратегии

Эта стратегия остаётся серверной. Не используйте её как замену GET-хукам в Client Components.

Если данные должны попасть в клиентский SWR-хук, используйте Начальные данные для клиентских хуков.

Что не делать

// Плохо — передавать промис в произвольный клиентский компонент без ясной стратегии
return <PetListClient petsPromise={petsPromise} />

Для клиентского потребления есть отдельная стратегия через SWRConfig fallback и готовые GET-хуки REST-клиента.