Использование потоковой передачи для ускорения загрузки страниц

Astro использует HTML streaming в режиме рендеринга по запросу (SSR), чтобы отправлять каждый компонент в браузер сразу после его готовности. Это позволяет пользователям видеть части страницы намного раньше, чем она будет полностью сформирована на сервере.

Как оптимизировать загрузку

Если вы используете await в блоке метаданных (frontmatter) страницы, Astro будет ждать завершения всех запросов, прежде чем отправить хоть какой-то HTML браузеру.

Было (блокирующий рендеринг)

В этом примере браузер ничего не покажет, пока не выполнятся оба запроса fetch:

---
// Сервер ждет выполнения обоих запросов
const person = await fetch('...').then(res => res.json());
const fact = await fetch('...').then(res => res.json());
---
<html>
  <body>
    <h1>{person.name}</h1>
    <p>{fact.text}</p>
  </body>
</html>

Стало (потоковый рендеринг)

Вынесите запросы данных в отдельные компоненты. Теперь Astro сможет мгновенно отправить заголовок страницы, а параграфы догрузятся по мере готовности данных.

---
import PersonName from '../components/PersonName.astro';
import RandomFact from '../components/RandomFact.astro';
---
<html>
  <body>
    <h1>Загружаем данные...</h1>
    <PersonName /> <!-- Рендерится сам по себе -->
    <RandomFact /> <!-- Рендерится сам по себе -->
  </body>
</html>

Внутри компонентов:

---
const person = await fetch('...').then(res => res.json());
---
<p>{person.name}</p>

Сервер начнет загрузку данных для PersonName и RandomFact параллельно и будет «вливать» готовый HTML в поток данных, отправляемый пользователю. Это делает сайт визуально более отзывчивым.