Получение данных в Next.js

В прошлой статье мы вкратце упомянули, что в Next.js есть две формы пререндеринга: статическая генерация (SSG) и генерация на стороне сервера (SSR). В этой статье мы глубже окунемся в стратегии получения данных для каждого случая.

Для справки

Мы поговорим о трех уникальных функциях, которые можно использовать для пререндеринга:

getStaticProps - (Статическая генерация) - получение данных во время сборки проекта;

getStaticPaths - (статическая генерация) - устанавливает динамические маршруты для предварительного рендеринга страниц на основе данных;

getServerSideProps - (серверный рендеринг) - получает данные на сервере при каждом запросе.

getStaticProps

Если вы экспортируете асинхронную функцию getStaticProps со страницы, Next.js будет предварительно рендерить эту страницу во время сборки, используя props, возвращаемые getStaticProps.

export async function getStaticProps(context) {
  return {
    props: {}, // будут переданы в компонент-страницу через props
  }
}

Объект context может содержать следующие параметры:

params - содержит параметры маршрута для страниц, использующих динамические маршруты. Например, если имя страницы [id].js, то параметры будут иметь вид { id: ... }. Используется совместно с getStaticPaths.

preview - должен быть true, если страница находится в режиме предварительного просмотра, и не определен в противном случае.

previewData - содержит данные предварительного просмотра, установленные с помощью setPreviewData.

locale - содержит активный языковую локаль (если эта опция включена).

locales - содержит все поддерживаемые языки (если эта опция включена).

defaultLocale - содержит языковую локаль по умолчанию (если эта опция включена).

Функция getStaticProps должна всегда возвращать объект со следующим содержимым:

props - требуемый объект с параметрами, который будет получен компонентом страницы. Это должен быть сериализуемый объект.

revalidate - необязательный параметр, количество секунд, после которого может произойти повторный рендеринг страницы. Смотрите подробнее на странице инкрементальной статической регенерации.

notFound - необязательный параметр, позволяющее странице возвращать статус 404 и страницу. Ниже приведен пример того, как это работает:

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

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

  return {
    props: { data }, // будут переданы в компонент страницы в качестве пропсов
  }
}

Примечание: notFound не требуется для режима fallback: false, поскольку только пути, возвращенные из getStaticPaths, будут предварительно отрисованы.

Для справки

Примечание: с notFound: true страница вернет 404, даже если ранее была успешно сгенерирована страница. Это предназначено для поддержки вариантов использования, таких как удаление созданного пользователем контента его автором.

Для справки

redirect - необязательное значение перенаправления, позволяющее перенаправлять на внутренние и внешние ресурсы. Он должен соответствовать форме { destination: string, permanent: boolean }. В некоторых редких случаях вам может потребоваться назначить пользовательский код состояния для более старых HTTP-клиентов для правильного перенаправления. В этих случаях вы можете использовать свойство statusCode вместо свойства permanent, но не то и другое вместе. Ниже приведен пример того, как это работает:

export async function getStaticProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: { data }, // будут переданы в компонент страницы в качестве пропсов
  }
}

Примечание: перенаправление во время сборки в настоящее время не разрешено, и если перенаправления известны во время сборки, их следует добавить в next.config.js.

Для справки

Примечание: вы можете импортировать модули в области верхнего уровня для использования в getStaticProps. Импорты, используемые в getStaticProps, не будут объединены для клиентской стороны.

Для справки

Примечание: не следует использовать fetch() для вызова маршрута API в getStaticProps. Вместо этого напрямую импортируйте логику, используемую в вашем маршруте API. Для этого подхода вам может потребоваться небольшой рефакторинг вашего кода. Получение из внешнего API - это нормально!

Для справки

Простой пример

Ниже показан пример, который использует getStaticProps для получения списка сообщений в блоге из CMS (системы управления контентом).

// Пропс posts будет заполняться в процессе сборки, с помощью функции getStaticProps
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// Эта функция вызывается во время сборки на стороне сервера.
// Она не будет вызываться на стороне клиента, поэтому в этой
// функции можно к примеру, напрямую обратиться к БД.
export async function getStaticProps() {
  // Получаем данные с внешнего API
  // Можно использовать любую библиотеку для получения данных.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Эта функция возвращает объект c объектом props.
  // который в свою очередь будет передан в компонент Blog(код которого описан выше)
  return {
    props: {
      posts,
    },
  }
}

export default Blog

Когда стоит использовать getStaticProps?

• Если данные, необходимые для рендеринга страницы, должны быть доступны во время сборки до запроса пользователя.
• Если данные берутся из безголовой (headless) CMS.
• Если данные могут быть кэшированы публично (т.е. когда данные, не специфичны для пользователя).
• Страница должна быть предварительно отрендерена (для SEO) и быть очень быстрой - getStaticProps генерирует файлы HTML и JSON, которые для повышения производительности могут быть кэшированы CDN.