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
  }
}

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