getServerSideProps

Когда вы экспортируете функцию getServerSideProps (рендеринг на стороне сервера, SSR) из страницы, Next.js будет предварительно рендерить эту страницу при каждом запросе, используя данные, возвращённые getServerSideProps. Это полезно, если вам нужно получать часто изменяющиеся данные и обновлять страницу для отображения актуальной информации.

import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'

type Repo = {
  name: string
  stargazers_count: number
}

export const getServerSideProps = (async () => {
  // Получаем данные из внешнего API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo: Repo = await res.json()
  // Передаём данные на страницу через props
  return { props: { repo } }
}) satisfies GetServerSideProps<{ repo: Repo }>

export default function Page({
  repo,
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

export async function getServerSideProps() {
  // Получаем данные из внешнего API
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const repo = await res.json()
  // Передаём данные на страницу через props
  return { props: { repo } }
}

export default function Page({ repo }) {
  return (
    <main>
      <p>{repo.stargazers_count}</p>
    </main>
  )
}

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

Параметр context

Параметр context — это объект, содержащий следующие ключи:

Возвращаемые значения getServerSideProps

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

props

Объект props содержит пары ключ-значение, где каждое значение передаётся в компонент страницы. Это должен быть сериализуемый объект, чтобы все props могли быть сериализованы с помощью JSON.stringify.

export async function getServerSideProps(context) {
  return {
    props: { message: `Next.js это круто` }, // будет передано в компонент страницы как props
  }
}

notFound

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

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

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

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

redirect

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

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

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

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

История версий