Блог

У меня есть Next.js приложение, которое использует сторонний API для отображения некоторых данных. Я запрашиваю эти данные с помощью Next.js Маршруты API. Вот мой /pages/api/data.js .

 const handler = async (req, res) => {
    const data = await fetch('https://api.example.com/v1/data');

    res.status(200).json(data);
};

export default handler;
 

Как это работает за кулисами? Извлекает ли он сторонний API каждый раз, когда я отправляю запросы /api/data ? Или он кэширует результаты во время сборки?

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

 export async function getStaticProps(context) {
  const data = await fetch('https://api.example.com/v1/data');

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: { data: res.status(200).json(data) }, // will be passed to the page component as props
  }
}