Загрузка данных при сборке

Фронтматтер выполняется на сервере, поэтому в нём можно сразу обращаться к внешним API через fetch() и читать файлы. В статическом сайте это происходит один раз, при сборке: посетитель получает готовый HTML с данными, а запрос к API из его браузера не идёт.

Запрос к API

Пусть у блога есть сервис со списком рекомендованных книг по адресу https://example.com/api/books.json. Создайте страницу src/pages/books.astro:

---
import BaseLayout from '../layouts/BaseLayout.astro';
 
const response = await fetch('https://example.com/api/books.json');
const books = await response.json();
---
 
<BaseLayout title="Книги">
  <h1>Что почитать</h1>
  <ul>
    {books.map((book) => <li>{book.title} — {book.author}</li>)}
  </ul>
</BaseLayout>

Откройте /books — появится список книг. fetch() и await работают во фронтматтере так же, как в любом асинхронном коде из учебника. В режиме разработки запрос выполняется при каждом открытии страницы, а после npm run build — один раз.

Проверка ответа

Если API ответит ошибкой, response.json() может упасть с непонятным сообщением. Лучше проверить статус явно:

---
const response = await fetch('https://example.com/api/books.json');
if (!response.ok) {
  throw new Error(`API книг ответил ${response.status}`);
}
const books = await response.json();
---

Ошибка во фронтматтере останавливает сборку, и в терминале будет видно, какая страница и почему не собралась. Это лучше, чем выложить сайт с пустым списком.

Данные из файла

Небольшие данные удобно держать прямо в проекте. Создайте src/data/links.json:

[
  { "title": "Документация Astro", "url": "https://docs.astro.build" },
  { "title": "MDN", "url": "https://developer.mozilla.org" }
]

И импортируйте его во фронтматтере, например в src/pages/about.astro:

---
import links from '../data/links.json';
---
 
<ul>
  {links.map((link) => <li><a href={link.url}>{link.title}</a></li>)}
</ul>

Файлы JSON импортируются как обычные модули, без fetch(). На странице появится список из двух ссылок.

Когда данные устаревают

Данные, полученные при сборке, не обновятся, пока сайт не соберут заново. Для редко меняющихся данных это нормально: сборку запускают по расписанию или после изменения. Если данные должны быть свежими при каждом открытии страницы, нужен рендеринг по запросу — следующий урок.

Частая ошибка

Кладут секретный ключ API прямо в код фронтматтера и коммитят его в Git. Хотя код фронтматтера в браузер не попадает, ключ окажется в репозитории. Ключи хранят в файле .env и читают через astro:env — об этом урок о переменных окружения.