S.Gromov
bdb99ade62
- перенесены каноны и VitePress-конфиги в projects/<slug> - добавлены корневой и проектные build.ts для сборки артефактов - добавлены shared-библиотеки сборки в projects/_shared/lib - обновлены CI, Dockerfile, package.json, gitignore и README - удалена сборка frontend-агента
95 lines
3.3 KiB
Markdown
95 lines
3.3 KiB
Markdown
---
|
||
title: Параллельные серверные запросы
|
||
description: Как запускать независимые REST-запросы на сервере без waterfall.
|
||
keywords: [rest, promise.all, параллельные запросы, server components]
|
||
---
|
||
|
||
# Параллельные серверные запросы
|
||
|
||
Если серверному компоненту нужно несколько независимых данных, запускайте запросы до ожидания результата. Последовательный `await` создаёт waterfall и замедляет рендер.
|
||
|
||
## Когда использовать
|
||
|
||
- Запросы независимы друг от друга.
|
||
- Все данные нужны текущему серверному компоненту перед возвратом UI.
|
||
- Нельзя или не нужно стримить часть UI отдельно.
|
||
|
||
## Хорошо
|
||
|
||
```tsx
|
||
import { petStoreApi, StatusEnum } from 'infra/pet-store-api'
|
||
import { PetsDashboardScreen } from 'screens/pets-dashboard'
|
||
|
||
export default async function PetsDashboardPage() {
|
||
const availablePetsPromise = petStoreApi.pet.findPetsByStatus({
|
||
status: StatusEnum.Available,
|
||
})
|
||
const pendingPetsPromise = petStoreApi.pet.findPetsByStatus({
|
||
status: StatusEnum.Pending,
|
||
})
|
||
const soldPetsPromise = petStoreApi.pet.findPetsByStatus({
|
||
status: StatusEnum.Sold,
|
||
})
|
||
|
||
const [availablePets, pendingPets, soldPets] = await Promise.all([
|
||
availablePetsPromise,
|
||
pendingPetsPromise,
|
||
soldPetsPromise,
|
||
])
|
||
|
||
return (
|
||
<PetsDashboardScreen
|
||
availablePets={availablePets}
|
||
pendingPets={pendingPets}
|
||
soldPets={soldPets}
|
||
/>
|
||
)
|
||
}
|
||
```
|
||
|
||
## Плохо
|
||
|
||
```tsx
|
||
export default async function PetsDashboardPage() {
|
||
const availablePets = await petStoreApi.pet.findPetsByStatus({
|
||
status: StatusEnum.Available,
|
||
})
|
||
const pendingPets = await petStoreApi.pet.findPetsByStatus({
|
||
status: StatusEnum.Pending,
|
||
})
|
||
const soldPets = await petStoreApi.pet.findPetsByStatus({
|
||
status: StatusEnum.Sold,
|
||
})
|
||
|
||
return (
|
||
<PetsDashboardScreen
|
||
availablePets={availablePets}
|
||
pendingPets={pendingPets}
|
||
soldPets={soldPets}
|
||
/>
|
||
)
|
||
}
|
||
```
|
||
|
||
Во втором примере каждый следующий запрос ждёт предыдущий, хотя они независимы.
|
||
|
||
## Зависимые запросы
|
||
|
||
Если второй запрос зависит от результата первого, последовательный `await` допустим:
|
||
|
||
```tsx
|
||
export default async function OrderPage({ params }: OrderPageProps) {
|
||
const { id } = await params
|
||
const order = await petStoreApi.store.getOrderById({ orderId: Number(id) })
|
||
const pet = await petStoreApi.pet.getPetById({ petId: order.petId })
|
||
|
||
return <OrderScreen order={order} pet={pet} />
|
||
}
|
||
```
|
||
|
||
Не превращайте зависимый сценарий в `Promise.all` искусственно.
|
||
|
||
## Когда выбрать другую стратегию
|
||
|
||
Если часть данных не обязательна для первого блока UI, можно запустить промис выше и передать его ниже: [Передача промиса ниже](/docs/applied/data-fetch/pass-promise-down).
|