S.Gromov
bdb99ade62
- перенесены каноны и VitePress-конфиги в projects/<slug> - добавлены корневой и проектные build.ts для сборки артефактов - добавлены shared-библиотеки сборки в projects/_shared/lib - обновлены CI, Dockerfile, package.json, gitignore и README - удалена сборка frontend-агента
65 lines
2.7 KiB
Markdown
65 lines
2.7 KiB
Markdown
---
|
||
title: Передача промиса ниже
|
||
description: Как запускать серверный REST-запрос выше и ожидать его во вложенном server-компоненте.
|
||
keywords: [rest, promise, suspense, streaming, server components]
|
||
---
|
||
|
||
# Передача промиса ниже
|
||
|
||
Серверный компонент может запустить запрос и передать промис вложенному server-компоненту. Это полезно, когда часть UI можно загрузить отдельно через `Suspense`.
|
||
|
||
## Когда использовать
|
||
|
||
- Верхняя часть страницы может отрендериться без этих данных.
|
||
- Данные нужны только вложенному server-компоненту.
|
||
- Нужна `Suspense`-граница и серверный стриминг.
|
||
|
||
## Пример
|
||
|
||
```tsx
|
||
// 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-хук, используйте [Начальные данные для клиентских хуков](/docs/applied/data-fetch/client-hooks-initial-data).
|
||
|
||
## Что не делать
|
||
|
||
```tsx
|
||
// Плохо — передавать промис в произвольный клиентский компонент без ясной стратегии
|
||
return <PetListClient petsPromise={petsPromise} />
|
||
```
|
||
|
||
Для клиентского потребления есть отдельная стратегия через `SWRConfig fallback` и готовые GET-хуки REST-клиента.
|