63 lines
2.7 KiB
Markdown
63 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 } from 'infrastructure/pet-store-api'
|
|||
|
|
import { PetListSection } from 'widgets/pet-list-section'
|
|||
|
|
import { PetListSkeleton } from 'widgets/pet-list-section'
|
|||
|
|
import type { Pet } from 'infrastructure/pet-store-api'
|
|||
|
|
|
|||
|
|
export default function PetsPage() {
|
|||
|
|
const petsPromise = petStoreApi.pet.findPetsByStatus({ status: '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-хук, используйте [Начальные данные для клиентских хуков](./client-hooks-initial-data.md).
|
|||
|
|
|
|||
|
|
## Что не делать
|
|||
|
|
|
|||
|
|
```tsx
|
|||
|
|
// Плохо — передавать промис в произвольный клиентский компонент без ясной стратегии
|
|||
|
|
return <PetListClient petsPromise={petsPromise} />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Для клиентского потребления есть отдельная стратегия через `SWRConfig fallback` и готовые GET-хуки REST-клиента.
|