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

Основные назначения и особенности getStaticProps:

1. Предварительная генерация страниц: getStaticProps позволяет вам заранее генерировать HTML для страниц во время сборки, что улучшает производительность, так как пользователи получают уже готовый HTML, а не ждут, пока JavaScript загрузит и отрендерит страницу.
2. Оптимизация для SEO: Поскольку страницы предварительно рендерятся, они содержат полностью готовый HTML, что улучшает индексацию поисковыми системами и оптимизацию для SEO.
3. Получение данных: Внутри getStaticProps вы можете выполнять запросы к базе данных, API или другим источникам данных для получения данных, необходимых для рендеринга страницы. Эти данные затем передаются в компонент страницы в виде пропсов.
4. Кэширование: Поскольку страницы генерируются статически, они могут быть кэшированы и обслуживаться быстро из CDN, что улучшает время загрузки для пользователей.
5. Обновление данных: Вы можете использовать параметр revalidate в getStaticProps, чтобы указать, как часто Next.js должен перегенерировать страницу в фоновом режиме, если есть новые запросы. Это позволяет обновлять контент без полной пересборки приложения.

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

export async function getStaticProps() {
  // Fetch data from an API
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
 
  // Pass data to the page via props
  return {
    props: {
      data,
    },
    // Next.js will attempt to re-generate the page:
    // - When a request comes in
    // - At most once every 10 seconds
    revalidate: 10, // In seconds
  };
}

В этом примере getStaticProps выполняет запрос к API и передает полученные данные в компонент страницы в виде пропсов. Параметр revalidate указывает, что Next.js должен попытаться перегенерировать страницу каждые 10 секунд, если есть новые запросы.

Назад