В Next.js получение данных является важным аспектом создания динамических веб-приложений. Два популярных метода получения данных в Next.js — это getServerSidePropsи getStaticProps. В этой статье мы рассмотрим различия между этими двумя методами и приведем примеры кода, которые помогут вам понять их использование.

Субтитры: Что такое getServerSidePropsи getStaticProps?

getServerSideProps:
Функция getServerSidePropsиспользуется для получения данных при каждом запросе на страницу. Это означает, что данные извлекаются на стороне сервера и поэтому являются динамическими. Этот метод полезен, когда вам нужно получить данные, которые часто меняются, или данные, специфичные для каждого запроса. Например, вы можете использовать getServerSidePropsдля получения пользовательских данных или данных из внешнего API.

Вот пример использования getServerSideProps:

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

getStaticProps:
Функция getStaticProps, с другой стороны, используется для извлечения данных во время сборки. Данные, полученные с помощью этого метода, являются статическими и будут одинаковыми для всех пользователей, посещающих страницу. Этот метод идеально подходит для данных, которые не меняются часто, например, сообщений в блогах или списков продуктов. Путем предварительной обработки данных Next.js может генерировать статические HTML-файлы, что приводит к более быстрой загрузке страниц.

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

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const data = await res.json();
  return {
    props: {
      data,
    },
  };
}

Субтитры: когда использовать getServerSidePropsи getStaticProps?

getServerSidePropsподходит, если:

• Вам необходимо получать данные, которые часто меняются.
• Вам необходимы данные, относящиеся к конкретному пользователю или запросу.
• Вы хотите получить данные из внешнего API, который недоступен во время сборки.

getStaticPropsподходит, если:

• У вас есть данные, которые меняются нечасто и могут быть предварительно обработаны.
• Вы хотите повысить производительность за счет создания статических HTML-файлов.
• Вам необходимо получить данные из внешнего API, доступного во время сборки.

В некоторых случаях вам может потребоваться использовать и getServerSideProps, и getStaticPropsв одном приложении. Например, вы можете использовать getStaticPropsдля предварительной визуализации большинства страниц, а затем использовать getServerSidePropsдля определенных страниц, требующих динамических данных.