S.Gromov
f2358da397
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
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-клиента.
|