Как использовать getStaticProps для предварительного рендера?

@caterina 

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

1. Создайте новую страницу или откройте существующую: Страницы в Next.js находятся в папке pages. Вы можете создать новую страницу или использовать существующую, где хотите использовать предварительный рендеринг.
2. Экспортируйте функцию getStaticProps: В этой функции вы можете выполнять любые асинхронные операции для получения данных (например, запросы к API или к базе данных).
3. Верните объект с данными: Возвращаемый объект должен содержать ключ props, который будет передан в компонент страницы.

Пример использования getStaticProps:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// pages/index.js

export async function getStaticProps() {
  // Здесь вы можете выполнять асинхронные операции, например, запросы к API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  // Возвращайте объект с props
  return {
    props: {
      data,
    },
  };
}

export default function Home({ data }) {
  return (
    <div>
      <h1>Данные</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

Основные моменты:

• Предварительный рендеринг: getStaticProps используется для статической генерации страниц, что означает, что страницы заранее генерируются во время сборки и становятся доступными сразу при первом запросе.
• Асинхронность: getStaticProps может быть асинхронной, поэтому поддерживает использование async/await.
• Регенерация: Если вам необходимо обновлять страницы через определенное время, вы можете использовать параметр revalidate, который позволяет указать время в секундах для регенерации страницы: return { props: { data, }, revalidate: 60, // будет пересобирать страницу не реже чем раз в 60 секунд };

Использование getStaticProps помогает ускорить загрузку страниц и улучшить SEO, поскольку страницы уже сгенерированы и отдают полностью готовую разметку.