Как получать данные в Astro? Какой подход рекомендуется во frontmatter и в endpoints?

Получение данных во frontmatter

Frontmatter — это блок кода между тройными дефисами в .astro-файле. Он всегда выполняется на сервере (во время сборки или на каждый запрос в SSR). Там можно использовать нативный fetch без каких-либо оберток:

---
// src/pages/blog/index.astro
const response = await fetch('https://api.example.com/posts');
const posts = await response.json();
---

<ul>
  {posts.map((post) => (
    <li><a href={`/blog/${post.slug}`}>{post.title}</a></li>
  ))}
</ul>

Получение данных с параметрами страницы

---
// src/pages/blog/[slug].astro
import type { GetStaticPaths } from 'astro';

export const getStaticPaths: GetStaticPaths = async () => {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return posts.map((post: { slug: string }) => ({
    params: { slug: post.slug },
    props: { post },
  }));
};

const { post } = Astro.props;
---

<h1>{post.title}</h1>
<p>{post.body}</p>

Параллельные запросы

Несколько независимых запросов лучше выполнять параллельно:

---
const [usersRes, postsRes] = await Promise.all([
  fetch('https://api.example.com/users'),
  fetch('https://api.example.com/posts'),
]);
const [users, posts] = await Promise.all([
  usersRes.json(),
  postsRes.json(),
]);
---

Получение данных в Content Collections

Для локальных данных (Markdown, JSON) рекомендуется getCollection:

---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---

Получение данных в API-эндпоинтах

// src/pages/api/posts.ts
import type { APIRoute } from 'astro';

export const GET: APIRoute = async ({ url }) => {
  const page = url.searchParams.get('page') ?? '1';
  const res = await fetch(`https://api.example.com/posts?page=${page}`);
  const data = await res.json();
  return Response.json(data);
};

Кеширование запросов

В статическом режиме все запросы кешируются автоматически — они выполняются один раз при сборке. В SSR-режиме для кеширования используйте fetch с заголовком Cache-Control или Redis:

const res = await fetch('https://api.example.com/data', {
  headers: { 'Cache-Control': 'max-age=3600' },
});

Подводные камни

• В статическом режиме fetch во frontmatter выполняется при сборке — данные на продакшне устаревают до следующего деплоя. Используйте ISR (инкрементальную регенерацию) или SSR для динамических данных.
• Ошибки сети во время сборки прерывают весь процесс — оборачивайте fetch в try/catch и предусматривайте фолбэки.
• fetch в .astro-компоненте вызывается при каждом рендере страницы в SSR — без кеша это может перегрузить upstream API.
• Не передавайте секреты через fetch в клиентских компонентах (React/Vue/Svelte) — они попадут в бандл. Секреты доступны только во frontmatter.
• В Node.js 16 нативного fetch нет — используйте флаг --experimental-fetch или пакет node-fetch.
• Waterfall-запросы (один за другим) заметно замедляют сборку — всегда используйте Promise.all для независимых запросов.

• Делать долгий внешний fetch в frontmatter SSR-страницы без таймаутов и кеша.
• Тащить логику мутаций в client-only код вместо эндпоинта/Action.
• Раскрывать секретный токен через переменную PUBLIC_*.

• Различает frontmatter-загрузку и API-эндпоинт.
• Понимает, когда использовать Actions vs endpoint.
• Помнит про обработку ошибок и кеш-заголовки.